关于ajax:Ajax基础原理及使用教程来自动力节点

47次阅读

共计 2976 个字符，预计需要花费 8 分钟才能阅读完成。

首先，咱们来回顾下 ajax 是什么?

Ajax = 异步 JavaScript 和 XML。

Ajax 是一种用于创立疾速动静网页的技术。

通过在后盾与服务器进行大量数据交换，Ajax 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。

传统的网页 (不应用 Ajax) 如果须要更新内容，必须重载整个网页面

后面谈到 ajax 是什么，其次要也就是异步提交，大家是否晓得同步和异步提交的区别吗?

同步提交：当用户发送申请时，以后页面不能够应用，服务器响应页面到客户端，响应实现，用户才能够应用页面。
异步提交：当用户发送申请时，以后页面还能够持续应用，当异步申请的数据响应给页面，页面把数据显示进去。

客户端发送申请，申请交给 xhr，xhr 把申请提交给服务，服务器进行业务解决，服务器响应数据交给 xhr 对象，xhr 对象接收数据，由 javascript 把数据写到页面上，如下图所示：

// 第一步，创立 XMLHttpRequest 对象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
// 第二步，注册回调函数
xmlHttp.onreadystatechange =callback1;
//{//    if (xmlHttp.readyState == 4)
    //        if (xmlHttp.status == 200) {
    //            var responseText = xmlHttp.responseText;
    //        }
    //}
// 第三步，配置申请信息，open(),get
     //get 申请下参数加在 url 后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
      xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
    //post 申请下须要配置申请头信息
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 第四步，发送申请,post 申请下，要传递的参数放这
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}
// 第五步，创立回调函数
function callback1() {if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) {
            // 获得返回的数据
            var data = xmlHttp.responseText;
            //json 字符串转为 json 格局
            data = eval(data);
            $.each(data,
                function(i, v) {alert(v);
                });       
        }
}
// 后盾办法
 public  void GetAllComment(HttpContext context)
        {
            //Params 能够获得 get 与 post 形式传递过去的值。string methodName = context.Request.Params["methodName"];
            //QueryString 只能获得 get 形式传递过去的值。string str1 = context.Request.Form["str1"];
            // 获得 httpRequest 传来的值，包含 get 与 post 形式
            string str2 = context.Request["str2"];
            List comments = new List();
            comments.Add(methodName);
            comments.Add(str1);
            comments.Add(str2);
            //ajax 承受的是 json 类型，须要把返回的数据转给 json 格局
            string commentsJson = new JavaScriptSerializer().Serialize(comments);
            context.Response.Write(commentsJson);
        }

建设 xmlHttpRequest 对象
设置回调函数
应用 open 办法与服务器建设链接
向服务器发送数据
在回调函数中针对不同的响应状态进行解决

1、创立原生 Ajax 对象

XMLHttpRequest 是 AJAX 的根底，所有古代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 均内建 XMLHttpRequest 对象。那么咱们上面来创立一个 ajax 对象

const instance = new XMLHttpRequest();

这样咱们就创立了一个用于进行 ajax 交互的对象。

当然咱们这儿提及一下老版本的 ie5、ie6 的 javascript 对象都是应用 ActiveX 来实现的规范，所以没有 XMLHttpRequest 对象。他们创立一个对象应用这种形式

const instance = new ActiveXObject("Microsoft.XMLHTTP");

其实咱们理解一下就行了，这块在你的代码也不必加上了，当初所有的网站应该都放弃了对低版本 ie 的反对，这个曾经退出了历史舞台，理解一下状况即可。

2、Ajax 发送申请

首先来看一下 XMLHttpRequest 如何发送一个申请到服务器

const instance = new XMLHttpRequest();
 
instance.open(method,url,async);
 
instance.send();

这里用到了两个办法，第一个 open 办法其实是配置 ajax 必要的信息，第二个 send 才是真正的发动申请到服务器。

3、Ajax 通过 readyState 状态的变动接管服务器响应

当申请被发送到服务器时，咱们须要执行一些基于响应的工作，每当 readyState 扭转时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。

4、进级苦恼之跨域申请

跨域是所有前端都必须去面对的一个辣手的问题，当你去申请其余服务器的资源时，浏览器平安限度会阻止该申请。你的申请不会到底服务器，被浏览器阻止了，这也是遵循了同源策略。

那么如何去解决这个跨域呢，通用的有几种办法，然而外围都是须要服务器去配合解决跨域，前端本人无奈解决跨域。

第一个采纳 JsonP 办法，这个办法其实也是须要后盾去配合解决，由后盾来进行申请，而后将数据拼装在一个 json 对象返回到前台，而后前台通过 callback 函数来进行操作。这个也比拟繁琐。
第二种就是服务端去放一个跨域文件 crossdomain.xml 搁置到服务器端，而后写上能够跨域的 ip 地址。
第三种配置反向代理服务器，通过代理服务器咱们也其实是代理服务器去申请外围，而后转发到咱们的服务器上。这样也能够避免跨域。

以上就是 AJAX 的常识总结，最初也举荐大家观看 ajax 的视频去学习，对于老手更易了解排汇，能源节点的 Ajax 学习教程，通过对 ajax 的传统应用形式，联合 json 操作的形式，联合跨域等高级技术的形式，对 ajax 做一个全面的解说。

Ajax 材料下载：http://www.bjpowernode.com/?s…

正文完