JavaScript-Ajax 与异步数据传输

我在前端开发中，经常会遇到查看http状态码以及查看HTTP里面的数据的情况，现在，我就针对网上的一些资料进行整理。

基本概念

Ajax全称是异步的JavaScript和XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

优点：

无需刷新页面，用户体验好；
异步与服务器通信，不影响主进程，响应更迅速；
可以把部分服务器的工作放在客户端的浏览器完成，减轻服务器压力，减少冗余请求和响应；
Ajax 是前端开发的标准化技术，无需插件支持，跨平台性能好；

缺点：

Ajax 请求不修改浏览器历史记录，因此不支持前进后退功能；
Ajax 暴露了过多和服务器交互的细节；
破坏了程序的异常机制，容易调试；
不利于搜索引擎抓取信息；

同源策略

同源策略是Netscape提出的一个著名的安全策略，它是指同一个“源头”的数据可以自由访问，但不同源的数据相互之间都不能访问。我们试想一下以下几种情况：

1)上淘宝购物，在登陆了自己的账号密码后，不需要再次登陆就可以直接购买商品，因为这两个页面是同源的，可以共享登录相关的cookie或localStorage数据。
2)我们在使用支付宝付款的时候，同时打开了一个不知名的网站，如果这个网站可以访问你的支付宝信息，就会发生严重的安全问题，这是浏览器不允许出现的事情。
3）想必你也有过同时登陆好几个 qq 账号的情况，如果同时打开各自的 qq 空间浏览器会有一个小号模式，也就是另外再打开一个窗口专门用来打开第二个 qq 账号的空间。
很明显，第1个和第3个例子中，不同的天猫商店和 qq 空间属于同源，可以共享登录信息。qq 为了区别不同的 qq 的登录信息，重新打开了一个窗口，因为浏览器的不同窗口是不能共享信息的。而第2个例子中的支付宝、网银、不知名网站之间是非同源的，所以彼此之间无法访问信息。

那什么是同源请求呢？同源请求要求被请求资源页面和发出请求页面满足3个相同：
1、协议相同
2、域名相同
3、端口相同

/* 以下两个数据非同源，域名和 ip 视为不同源
 * 这里应注意，ip和域名替换一样不是同源的
 * 假设www.abc123.com.cn解析后的 ip 是 195.155.200.134
 */
http://www.abc123.com.cn/
http://195.155.200.134/

Ajax编写步骤

谨记这四个流程：
1.创建xhr(xmlHttpRequest)对象
2.设置传输地址
3.设置回调函数
4.发送数据
常见的发送方式有GET和POST，除此之外还有HEAD,DELETE,TRACE,PUT,CONNECT,OPTIONS和PATCH等。

例如根据姓名查询一个人的信息并写在div#output中

//GET 方法
function search(name, fun){
  var xhr = new XMLHttpRequest();
  var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random();
  xhr.open("GET", url);
  xhr.send();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        var data = JSON.parse(xhr.responseText);   //获取了 JSON 字符串
        fun(data);
    }
  }
}
function show(data){
    this.innerHTML = "姓名：" + data.name + "<br />性别：" + data.gender + "<br />年龄：" + data.age + "<br />地址：" + data.address + "<br />电话：" + data.tel;
}
var output = document.getElementById("output");
search("李华", show.bind(output));

//服务器端 search.php
<?php
 $name = $_GET[name];
 //模拟数据查询结果
 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx"}';
?>

//POST方法
function search(name, fun){
  var xhr = new XMLHttpRequest();
  var url = "search.php";
  var para = "name=" + window.encodeURIComponent(name) + "&t=" + Math.random();
  xhr.open("POST", url);
  //POST方式下，必须把 Content-Type 设置为application/x-www-form-urlencoded
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      console.log(xhr.responseText);
        var data = JSON.parse(xhr.responseText);   //获取了 JSON 字符串
        fun(data);
    }
  }
  xhr.send(para);
}
function show(data){
    this.innerHTML = "姓名：" + data.name + "<br />性别：" + data.gender + "<br />年龄：" + data.age + "<br />地址：" + data.address + "<br />电话：" + data.tel;
}
var output = document.getElementById("output");
search("李华", show.bind(output));


//服务器端 search.php
<?php
 $name = $_POST[name];
 //模拟数据查询结果
 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx';
?>

上述代码的 jQuery 写法：

//GET 方式
function search(name, fun){
  var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random();
  $.get(url, fun);
}
function show(data){
  data = JSON.parse(data);
    this.innerHTML = "姓名：" + data.name + "<br />性别：" + data.gender + "<br />年龄：" + data.age + "<br />地址：" + data.address + "<br />电话：" + data.tel;
}
var output = document.getElementById("output");
search("李华", show.bind(output));

//POST 方式
function search(name, fun){
  var url = "search.php";
  var obj = {};
  obj.name = name;
  obj.t = Math.random();
  $.post(url, obj, fun);
}
function show(data){
  data = JSON.parse(data);
    this.innerHTML = "姓名：" + data.name + "<br />性别：" + data.gender + "<br />年龄：" + data.age + "<br />地址：" + data.address + "<br />电话：" + data.tel;
}
var output = document.getElementById("output");
search("李华", show.bind(output));

AJAX的方法

javascript
//属性
xhr.responseText;   //从服务器返回的字符串数据
xhr.responseXML;   //从服务器返回的 XML 数据
xhr.status;    //服务器相应状态
xhr.readyState;    //0: 请求未初始化; 1: 已建立连接; 2: 请求已接收; 3: 请求处理中; 4: 响应已就绪
xhr.timeout;    //指定多少毫秒后超时，长整型
xhr.upload;    //获取上传进度
xhr.withCredentials;    //是否可以跨源，boolean 型，默认 false
//方法
xhr.getResponseHeader('connection');   //获取指定头信息
xhr.getAllResponseHeaders();   //获全部定头信息
xhr.open("METHOD", url, isAsyn);   //open方法有3个参数，最后一个参数是 Boolean 型，表示是否异步，默认为 true
xhr.abort();   //终止请求，置xhr.readyState为0，但不触发onreadystatechange
xhr.overrideMimeType()   //强制重写 http 头的 MIME 类型
//事件
XMLHttpRequestEventTarget.onreadystatechange   //在xhr.readyState属性改变时触发
XMLHttpRequestEventTarget.ontimeout   //在响应超时时触发
XMLHttpRequestEventTarget.onabort   //当请求失败时调用该方法
XMLHttpRequestEventTarget.onerror   //当请求发生错误时调用该方法
XMLHttpRequestEventTarget.onload   //当一个HTTP请求正确加载出内容后返回时调用。
XMLHttpRequestEventTarget.onloadstart   //当一个HTTP请求开始加载数据时调用。
XMLHttpRequestEventTarget.onloadend   //当内容加载完成，不管失败与否，都会调用该方法
XMLHttpRequestEventTarget.onprogress   //间歇调用该方法用来获取请求过程中的信息。