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

传统的网页如果要加载新内容，需要重新加载整个页面。这会对网络流量产生过多负荷，用户体验感也随之下降。而使用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对象方法：

方法	描述
open(methon,url,asynch,usename,password)	建立HTTP请求，method是请求方法(post,get),url是请求资源地址,asynch表示是否采取异步方式(true，false),username、password指定用户名和密码
abort()	强制退出某一请求
getAllResponseHeader()	返回HTTP响应头信息
getResponseHeader(header)	返回HTTP响应头某个头部信息的值
send(content)	项服务器发生请求
setRequestHeader(Header,value)	设置HTTP请求的头部信息

XMLHttpRequest属性：

属性	描述
readyState	请求状态描述(0:请求未初始化、1：建立连接、2：请求接收、3：请求处理、4：完成)
responseText	服务器响应的数据(字符串类型)
responseXML	服务器响应的数据(XML类型)
status	服务器响应状态
status	服务器响应状态的文本内容
onreadystatechange	readyState状态发生改变时，XMLHttpRequest会自动调用onreadystatechange 指定的javascript函数

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参数通常由多个键值对组成，常用的有：

键	值
url	规定发送请求的URL默认是当前页面
type	规定请求的类型(GET 或 POST)
data	规定要发送到服务器的数据
dataType	预期的服务器响应的数据类型
error(xhr,status,error)	如果请求失败要运行的函数
success(result,status,xhr)	当请求成功时运行的函数

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");