Ajax简单用法

Posted 2021-03-11 梁仕博

Ajax是啥?
Ajax是允许客户端与服务端通信而无需刷新当前页面的一种技术,不是一种语言。

如何完成一个完整的Ajax交互？
交互分三步：
创建Ajax对象：XMLHttpRequest对象（XMLHttpRequest对象是Ajax的基础）
发送请求：
1.onreadystatechange事件处理函数：该函数由服务器触发，而不是由用户触发。在Ajax执行过程中，服务端会向用户端发送当前的状态（通过XMLHttpRequest对象的ReadyState属性）。在请求过程中，该函数会被触发4次。
2.open方法：建立请求open(method,url,asynch)。规定请求方式、地址和是否异步传输。
3.send方法：将请求发送到服务器。如果请求方式是post，send方法可以传递参数
接收响应：
1.readyState:存储XMLHttpRequest的状态值（0-4）.0：请求未初始化，1：服务器已建立连接，2.请求已接收，3.请求处理中，4.请求已完成，且相应已就绪。当readyState的值发生改变时，会调用onreadystatechange函数。
2.status:在XMLHttpRequest对象中，服务器发送的状态码都被保存在status属性中。通过将这个属性值与200和304比较，确保服务器是否发送了一个成功的响应。404：没找到界面，403.禁止访问，500.内部服务器错误，200.一切正常，304.没有被修改。
3.responseText:服务器向客户端发送的文件，它是一个html，XML或普通文本，这取决与服务器发送的内容，当readyState状态值变为4时，responseText才可用，表明Ajax请求已结束。
4.responseXML:如果服务器返回的是XML文件，那么数据将存储在responseXML属性中，只有服务器发送了正确的首部地址的信息时，responseXML属性才可用。

下面插入一个简单的demo

var xhr = new XMLHttpRequest();
var testData= {"tempStr":"sss"};
xhr.open("post", "http://localhost:14104/test/login");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(null);
xhr.onreadystatechange = function () {
    if (xhr.readystate == 4) {
        //响应内容解析完成，可以在客户端调用了
        if (xhr.status == 200) {
            //客户端的请求成功了
            console.log(xhr.responseText);
        }
    }
}

再来一个jquery版本的demo

$.ajax({
    //请求方式
    type : "get",
    //请求的媒体类型
    contentType: "application/json;charset=UTF-8",
    //请求地址
    url : "http://localhost:14104/test/login?tempStr=‘sss‘",
    //数据，json字符串
    data : null,
    //请求成功
    success : function(result) {
        console.log(result);
    },
    //请求失败，包含具体的错误信息
    error : function(e){
        console.log(e.status);
        console.log(e.responseText);
    }
});

需要注意的事项有以下几点：

1、get方式请求的时候，容易因为易泄露信息而阻止请求。后台需要将JsonRequestBehavior 设置为 AllowGet。我简单写成：return Json(person, JsonRequestBehavior.AllowGet);

2、就是跨域问题，相当尴尬，报个资源加载失败，完全想不到是跨域问题。熬夜到三点，说多了都是泪。解决方法就是在服务器端的webconfig加入以下代码：

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

遇到坑继续来填。。。