Ajax实现异步请求步骤

一、原生JS实现：

 

var request = new XMLHttpRequest();　　//创建XMLHttpRequest()对象

//启动一个HTTP请求，但未发送请求到服务端，最后一个参数默认为false，异步发送。
request.open("GET/POSt", url, true/false);　　//使用GET方法时直接在的url上传递参数。

//使用POST方法时要通过send方法传递参数给服务端
var data = "str";　　//str为获取表单元素的值或其它需要更新的内容

//设置头信息，表明发送的是表单元素
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//发送请求到服务端
request.send(null/data);

//onreadystatechange事件会在readystate属性改变时触发，监控readyState属性
request.onreadystatechange = function() {

//状态码为4表示请求已完成，响应内容已就绪
  if (request.readyState === 4) {

    //状态码304表示请求资源没有被修改，可以使用浏览器缓存
    if ((request.status >= 200 && request.status < 300) || request.status == 304) {

      //服务器返回的是json对象，使用JSON.parse()方法格式化为js对象。
      var data = JSON.parse(request.responseText);

      if (data.success) {
        //处理响应成功返回的数据

　　　　
      } else {
        //处理响应失败返回的数据

      }
    } else {
      //处理请求失败返回的数据
    } 
  }
}

//前后端交互约定,约定success为true或者false时返回不同的信息，
//通过success属性可以方便前端调用返回的信息。
{
  "success" : true,
  "msg": "xxx",
}

 

 

二、跨域解决方案

假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
　　利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：也可以设置指定的域名，如域名 http://www.test2.com ，那么就允许来自这个域名的请求：当前我设置的header为“*”，任意一个请求过来之后服务端我们都可以进行处理&响应，那么在调试工具中可以看到其头信息设置，其中见红框中有一项信息是“Access-Control-Allow-Origin：* ”，表示我们已经启用CORS，如下图。正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、CORS等等。

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
JSONP的基本原理即是：利用HTML的<script>标签可获取任何来源JavaScript代码的特点，实现数据的跨域访问。在本地定义一个callback，通过<script>标签的src属性获取远程API的数据(将callback函数名传递过去)，远程服务器的API需要符合JSONP的规范，即将原本JSON格式的输出数据改写为javascript的函数调用代码(callback为函数，原JSON数据为参数)；这样API返回的不再是JSON格式的数据而是JavaScript的代码。

script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script>  
<script type="text/javascript">  
$(function(){  
$.ajax(  
    {  
        type:'get',  
        url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',  
        dataType : 'jsonp',  
        jsonp:"jsoncallback",  
        success  : function(data) {  
            alert("用户名："+ data.user +" 密码："+ data.pass);  
        },  
        error : function() {  
            alert('fail');  
        }  
    }  
);  
})  
</script>  

跨域资源共享 CORS 详解