江苏龙网

  1. 主页 > 生活百科 > >

ajax跨域的基本流程

ajax

1. AJAXAJAX（Asynchronous JAVAScript and XML） ， 意思就是用JavaScript执行异步网络请求 。
主要可以通过架设代理服务器 ， JSONP和CORS三种方案实现跨域
用JavaScript写一个完整的AJAX代码并不复杂 ， 但是需要注意：AJAX请求是异步执行的 ， 也就是说 ， 要通过回调函数获得响应 。
创建ajax的过程一般如下：
创建XMLHttpRequest对象 ， 也就是创建一个异步调用对象；判断XHR对象属性；创建一个新的HTTP请求 ， 并指定该HTTP请求的方法、URL及验证信息；设置响应HTTP请求状态变化的函数；发送HTTP请求；获取异步调用返回的数据；使用JavaScript和DOM实现局部刷新 。
代码 。
var xmlhttp;function createXMLHttpRequest () {
xmlhttp = null; if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} // 异步调用服务器段数据
if (xmlhttp != null) { // 创建http请求
xmlhttp.open('GET/POST', url, true); // 设置http请求状态变化的函数
xmlhttp.onreadystatechange = httpStateChange; // 发送请求
xmlhttp.send(null);
} else { console.log('不支持XHR');
}
}
// 响应HTTP请求状态变化的函数function httpStateChange () { //判断异步调用是否完成
if (xmlhttp.readyState == 4) {//readyState==4表示后台处理完成了
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){ //判断异步调用是否成功,如果成功开始局部更新数据
//code...
} else{ console.log("出错状态码：" + xmlhttp.status + "出错信息：" + xmlhttp.statusText);
}
}
}
对于低版本的IE ， 需要换一个ActiveXObject对象,如果你想把标准写法和IE写法混在一起 ， 可以这么写 。
var request;if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest 。注意 ， 不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性 ， 一是因为这个字符串本身可以伪造 ， 二是通过IE版本判断JavaScript特性将非常复杂 。
当创建了XMLHttpRequest对象后 ， 要先设置onreadystatechange
的回调函数 。在回调函数中 ， 通常我们只需通过readyState === 4判断请求是否完成 ， 如果已完成 ， 再根据status判断是否是一个成功的响应 。
XMLHttpRequest对象的open()方法有3个参数 ， 第一个参数指定是GET还是POST ， 第二个参数指定URL地址 ， 第三个参数指定是否使用异步 ， 默认是true ， 所以不用写 。注意 ， 千万不要把第三个参数指定为false ， 否则浏览器将停止响应 ， 直到AJAX请求完成 。如果这个请求耗时10秒 ， 那么10秒内你会发现浏览器处于“假死”状态 。
最后调用send()方法才真正发送请求 。GET请求不需要参数 ， POST请求需要把body部分以字符串或者FormData对象传进去 。
2. 跨域安全限制
因为浏览器的“同源策略” ， 协议、域名、端口号若有一个不同 ， 则不能访问 。AJAX本身是不能跨域的 ， AJAX直接请求普通文件存在跨域无权限访问的问题 ， 只要是跨域请求 ， 一律不准；但是配合后台可以跨域 。
因为同源策略限制的是浏览器但是对服务器不限制 ， 服务器可以跨域 。
那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的 ， 大概有以下几种 。
2.1 CORS
【ajax跨域的基本流程】CORS（Cross-Origin Resource Sharing ， 跨源资源共享）是W3C的一个草案 ， 定义了在必须访问跨域资源时 ， 浏览器与服务器应该如何沟通 。
CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通 ， 从而决定请求或响应是应该成功 ， 还是应该失败 。
比如一个简单的使用GET或者POST发送的请求 ， 它没有自定义头部 ， 而主体内容是text/plain 。在发送该请求时 ， 需要给它附加一个额外的Origin头部 ， 其中包含请求页面的源信息（协议、域名和端口） ， 以便服务器根据这个头部信息来决定是否给予响应 。下面是Origin头部的一个示例 。


推荐阅读


上一篇：莴笋炒榨菜 莴笋炒茄子

下一篇：怎样蒸包子，这样蒸包子又白又松软