zoukankan      html  css  js  c++  java
  • 通用ajax请求方法封装,兼容主流浏览器

    ajax简单介绍
    没有AJAX会怎么样?普通的ASP.Net每次运行服务端方法的时候都要刷新当前页面。

    假设没有AJAX,在youku看视频的过程中假设点击了“顶、踩”、评论、评论翻页,页面就会刷新,视频就会被打断。开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(仅仅有支持html5的浏览器能播放)。然后放一个“赞”button的功能(赞的数量存到数据库),看没有ajax会打断视频。看优酷则不会。

    AJAX是一种进行页面局部异步刷新的技术。

    用AJAX向server发送请求和获得server返回的数据而且更新到界面中。不是整个页面刷新。而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向server发出请求以及获得返回的数据。就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得server的返回数据,这样页面就不会刷新了。

    XMLHTTPRequest是AJAX的核心对象

    有些反复的东西,我们不希望每次使用的时候都自己手动再去又一次写一遍,或者又一次复制一遍,这时。我就须要对代码进行封装。

    方法封装的原则:把不变的代码封装起来,把变的东西作为參数传递过去。

    //url:ajax请求地址带须要传递的參数,onsuccess:请求成功后运行的js方法
    function ajax(url, onsuccess)
    {
        var xmlhttp = window.XMLHttpRequest ?

    new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象。考虑兼容性。XHR xmlhttp.open("POST", url, true); //“准备”向server的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码 //AJAX是异步的,并非等到server端返回才继续运行 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示server返回完毕数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了。可是server还没有完毕响应的生成) { if (xmlhttp.status == 200) //假设Http状态码为200则是成功 { onsuccess(xmlhttp.responseText); } else { alert("AJAXserver返回错误!"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前运行!!!。 xmlhttp.send(); //这时才開始发送请求。并不等于server端返回。请求发出去了,我不等!

    去监听onreadystatechange吧。 }


  • 相关阅读:
    sortColors
    搜索二维矩阵
    矩阵置零
    求解最大子数组的和
    length of the longest substring without repeating character
    求解最大回文子字符串
    求两数的和
    验证回文串的一点解题思路
    fiddler-10-结合 Mock.js 伪接口数据进行测试(下)
    fiddler-9-结合 Mock.js 伪接口数据进行测试(上)
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/6746892.html
Copyright © 2011-2022 走看看