原生js实现Ajax、jQuery实现Ajax、跨域Ajax

传统的网页如果要加载新内容，需要重新加载整个页面。这会对网络流量产生过多负荷，用户体验感也随之下降。而使用Ajax技术则可以在不加载新页面的情况下获取刷新数据。

XMLHttpRequest

Ajax无需页面刷新即可进行数据的交互，是基于浏览器内置的XMLHttpRequest对象来实现的。使用XMLHttpRequest进行数据的交互可分为“创建XMLHttpRequest对象”、“发起请求”、“获取响应”的步骤。

创建XMLHttpRequest对象

var request;
if(window.XMLHttprquest){
    //firefox,Mozila浏览器
    request = new XMLHttpRequest();
}else{
    //兼容IE浏览器
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

发起请求

//绑定readyState属性变化响应事件
request.onreadystatechange = responseFunction();
//建立Http请求
request.open("GET","/test.php",true);
//发送请求
send(null); 

取得响应

function responseFunction(){
    if(request.readyState==4 && request.status==200){ 
        //处理代码
    }
}

XMLHttpRequest对象方法：

XMLHttpRequest属性：

JSON

Json是javascript对象表示法，是一种存储和交换文本信息的语法，采用键值对的方式组织。且作为一种存储语法，不同语言上都可以使用这种方式，只要按照Json格式解析数据即可。Javascript解析Json有两种方式：

eval

var jsonObj = eval( '(' +jsonData + ')');

parse

 var jsonObj = JSON.parse(jsonData);

注意 采用eval方法解析json数据时，json字符串中的js代码会执行，存在着安全隐患。因此推荐使用JSON.parse方法。

jQuery中使用Ajax

jQuery中封装着一个Ajax方法，可以直接进行异步数据传输。

$.ajax([settings])

settings参数通常由多个键值对组成，常用的有：

Ajax跨域

一个URL通常由 协议+域名+主域名+端口号+请求资源地址 组成。在一个页面里对另一个页面发起请求，如果协议、域名、主域名、端口号其中任意一个不同，则被称为跨域，两个页面就在不同的域中。Js出于对安全的考虑，采用同源策略，不允许跨域调用其它页面。然而在开发中，经常出现跨域的情况，解决跨域变成了一个很常见的问题。

解决跨域的办法：

代理

要使页面a跨域访问页面b，可以在页面a的环境中搭建一个Web站点（代理），该站点可以向页面b发送HTTP请求，接收响应，并将页面a加入到该站点中。这样页面a对页面b的请求，都发送到这个代理，然后由代理负责转发和接收响应。

jsonp

<script scr="http://test.com/example.php"> </script>

XHR2
在后端需要访问的页面中添加

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");