Ajax总结篇

原文出处 http://blog.poetries.top/2016/11/26/Ajax-summary

本文主要总结整理Ajax的一些常用的基础知识，适合初学者。

# 一、Ajax简介、优劣势、应用场景以及技术

• Ajax简介 :

  • Asynchronous Javascript And XML （异步的 JavaScript和XML）
  • 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
  • AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• 优点：

  • 页面无刷新，用户体验好。
  • 异步通信，更加快的响应能力。
  • 减少冗余请求，减轻了服务器负担
  • 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

• 缺点：

  • ajax干掉了back按钮，即对浏览器后退机制的破坏。
  • 存在一定的安全问题。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 无法用URL直接访问

• ajax应用场景

  • 场景 1. 数据验证
  • 场景 2. 按需取数据
  • 场景 3. 自动更新页面

• AJAX 包含以下五个部分： ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

  • 使用CSS和XHTML来表示。
  • 使用DOM模型来交互和动态显示。
  • 数据互换和操作技术，使用XML与XSLT
  • 使用XMLHttpRequest来和服务器进行异步通信。
  • 使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它

• 第一张图尤其说明了传统 Web 应用程序的结构与采用了 AJAX 技术的 Web 应用程序的结构上的差别
• 主要的差别，其实不是 JavaScript，不是 HTML/XHTML 和 CSS，而是采用 了 XMLHttpRequest 来向服务器异步的请求 XML 数据

• 再来看第二张图，传统的 Web 应用模式，用户的体验是割裂的，点击->等待-> 看到新的页面->再点击->再等待。而采用了AJAX技术之后，大部分的计算工作，都是在用户不察觉的情况下，交由服务器去完成了

# 二、创建ajax的步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

# 1、创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

• 创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

• 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

• 兼容各个浏览器的创建Ajax的工具函数

function createRequest (){
	try {
		xhr = new XMLHttpRequest();
	}catch (tryMS){
		try {
			xhr = new ActiveXObject("Msxm12.XMLHTTP");
		} catch (otherMS) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}catch (failed) {
				xhr = null;
			}
		}
	}
	return xhr;
}

# 2、准备请求

• 初始化该XMLHttpRequest对象，接受三个参数：

xhr.open(method,url,async);

• 第一个参数表示请求类型的字符串，其值可以是GET或者POST。
• GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);

• POST请求：

xhr.open("POST",demo.php,true);

• 第二个参数是要作为请求发送目标的URL。
• 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）
  • false：同步模式发出的请求会暂停所有javascript代码的执行，知道服务器获得响应为止，如果浏览器在连接网络时或者在下载文件时出了故障，页面就会一直挂起。
  • true：异步模式发出的请求，请求对象收发数据的同时，浏览器可以继续加载页面，执行其他javascript代码

# 3、发送请求

xhr.send();

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。

• GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

• POST请求： 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.sen

# 4、处理响应

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.responseText);
	}
}

• onreadystatechange ：当处理过程发生变化的时候执行下面的函数

• readyState ：ajax处理过程

  • 0：请求未初始化（还没有调用 open()）。
  • 1：请求已经建立，但是还没有发送（还没有调用 send()）。
  • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
  • 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
  • 4：响应已完成；您可以获取并使用服务器的响应了。

• status属性：

  • 200:“OK”
  • 404: 未找到页面

• responseText：获得字符串形式的响应数据

• responseXML：获得 XML 形式的响应数据

• 对象转换为JSON格式使用JSON.stringify

• json转换为对象格式用JSON.parse()

• 返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象

• 从服务器传回的数据是json格式，这里做一个例子说明，如何利用

  • 1、首先需要从XMLHttpRequest对象取回数据这是一个JSON串，把它转换为真正的JavaScript对象。使用JSON.parse(xhr.responseText)转化为JSON对象
  • 2、遍历得到的数组，向DOM中添加新元素

function example(responseText){

var saleDiv= document.getElementById("sales");
var sales = JSON.parse(responseText);
    for(var i=0;i<sales.length;i++){
        var sale = sales[i];
         var div = document.createElement("div");
         div.setAttribute("class","salseItem");
        div.innerHTML = sale.name + sale.sales;
        salseDiv.appendChild(div);
    }
}

# 5、封装例子

• 将AJAX请求封装成ajax()方法，它接受一个配置对象params

function ajax(params) {   
  params = params || {};   
  params.data = params.data || {};   
  // 判断是ajax请求还是jsonp请求
  var json = params.jsonp ? jsonp(params) : json(params);   
  // ajax请求   
  function json(params) {   
    //  请求方式，默认是GET
    params.type = (params.type || 'GET').toUpperCase(); 
    // 避免有特殊字符，必须格式化传输数据  
    params.data = formatParams(params.data);   
    var xhr = null;    

    // 实例化XMLHttpRequest对象   
    if(window.XMLHttpRequest) {   
      xhr = new XMLHttpRequest();   
    } else {   
      // IE6及其以下版本   
      xhr = new ActiveXObjcet('Microsoft.XMLHTTP');   
    }; 

• 使用实例：

ajax({   
  url: 'test.php',   // 请求地址
  type: 'POST',   // 请求类型，默认"GET"，还可以是"POST"
  data: {'b': '异步请求'},   // 传输数据
  success: function(res){   // 请求成功的回调函数
    console.log(JSON.parse(res));   
  },
  error: function(error) {}   // 请求失败的回调函数
});

• 这个过程是一定要记在脑子里的

function ajax(url, success, fail){
    // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
}

# 谈谈JSONP

• 使用

下面我们就根据以上 封装的例子跨域获取qq音乐的数据