标签：版本 request对象 test 初始 资源 设置 content 发送请求 head
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>
遇到坑继续来填。。。
标签：版本 request对象 test 初始 资源 设置 content 发送请求 head
原文地址：https://www.cnblogs.com/liangshibo/p/12275089.html
