深入理解Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30754745/article/details/108535925

Ajax的全称是Asynchronous JavaScript and XML（即异步的JavaScript和XML，它并不是一种新的编程语言，而是几种原有技术的结合体.

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术.

Ajax的优点：

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajaxl擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

Ajax的缺点：

不支持浏览器back（回退）按钮
安全问题Ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱

什么是XMLHttpRequest（对象）？

是一种支持异步请求的技术，它是Ajax的核心

作用：

可以向服务器提出请求并处理响应，而不阻塞用户
可以在页面加载以后进行页面的局部更新

如何使用Ajax？

要完整实现一个AJAX异步调用和局部刷新，通常需要以下几个步骤

创建XMLHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL
设置响应HTTP请求状态变化的函数

1.创建XMLHttpRequest对象：

//封装通用的xhr对象，兼容各个版本
function createXHR(){
  //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox、opera等
  if(typeof XMLHttpRequest != 'undefined'){
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != 'undefined'){
    //将所有可能出现的版本放在一个数组内
    var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP6.0','MSXML2.XMLHTTP5.0','MSXML2.XMLHTTP4.0','MSXML2.XMLHTTP3.0','MSXML2.XMLHTTP2.0']
    //遍历创建XMLHttpRequest对象
    var len = xhrArr.length;
    for(var i=0;i<len;i++){
      try{
        //创建XMLHttpRequest对象
        xhr = new ActiveXObject(xhrArr[i]);
        break;
      }
      catch(ex){
        
      }
    }
  }else{
    throw new Error('不支持XHR。');
  }
}

//调用检测：

简写（不够全面）：
在这里插入图片描述

2. 创建一个新的HTTP请求：

//创建请求
open('get',"./json/ajax.json?user=zhansan",true);
open('post',"./json/ajax.json",true); 

//post数据不允许写在?后边发送，需要写在后边的发送请求send中

语法：open（method , url , async）
功能：创建HTTP请求，规定请求的类型、URL及是否异步处理请求
参数说明：

method：请求类型，GET或POST ，默认GET
url：文件在服务器上的位置
async : true（异步）或false（同步）

open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错

url 参数是open0方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt和.xml，或者服务器脚本文件，如.asp和.php（在传回响应之前，能够在服务器上执行任务）

async是一个布尔值。如果是异步通信方式（true），客户机就不等待服务器的响应；如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作

GET与POST的区别：

与POST相比，GET更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

同步与异步的区别

同步：提交请求 -> 等待服务器处理 -> 处理完毕返回这个期间客户端浏览
器不能干任何事
异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情） -> 处理完毕

3. 设置响应HTTP请求状态变化的函数：

// XMLHttpRequest对象
var xhr = createXHR();
//相应XMLHttpRequest对象状态变化函数
//onreadystatechange在readystatechange属性发生改变时触发。
xhr.onreadystatechange = function(){
  //异步调用成功，响应内容解析完成，可以在浏览器调用
  if(xhr.readyState === 4){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      //获得服务器返回的数据：
      
    }
  }
}

readyState 状态状态说明：

(0)未初始化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：
创建－初始化请求－发送请求－接收数据－解析数据－完成

4.发送请求

请求发往服务器 -> 服务器根据请求生成响应 -> 传回给XHR对象

//发送请求
xhr.send({
  user:"张三",
  id:5,
  age:"14"
}); 
//设置http头部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

如何发送请求

语法：send（string）
功能：将请求发送到服务器
参数说明：string仅用于post请求注意事项：仅在POST请求时可以传入参数，不需要则发送null，在调用send方法之后请求被发往服务器

如何添加HTTP头

如果需要像HTML表单那样POST数据，需使用setRequestHeader()来添加HTTP头，然后在send0方法中规定希望发送的数据
语法：xmlhttp.setRequestHeader( header , value )
使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

完整：

//封装通用的xhr对象，兼容各个版本
function createXHR(){
  //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox、opera等
  if(typeof XMLHttpRequest != 'undefined'){
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != 'undefined'){
    //将所有可能出现的版本放在一个数组内
    var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP6.0','MSXML2.XMLHTTP5.0','MSXML2.XMLHTTP4.0','MSXML2.XMLHTTP3.0','MSXML2.XMLHTTP2.0']
    //遍历创建XMLHttpRequest对象
    var len = xhrArr.length;
    for(var i=0;i<len;i++){
      try{
        //创建XMLHttpRequest对象
        xhr = new ActiveXObject(xhrArr[i]);
        break;
      }
      catch(ex){

      }
    }
  }else{
    throw new Error('不支持XHR。');
  }
}
// XMLHttpRequest对象
var xhr = createXHR();
//相应XMLHttpRequest对象状态变化函数
//onreadystatechange在readystatechange属性发生改变时触发。
xhr.onreadystatechange = function(){
  //异步调用成功，响应内容解析完成，可以在浏览器调用
  if(xhr.readyState === 4){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      //获得服务器返回的数据：
      console.log(xhr.responseText);//返回的是字符串，也就是完整json里的内容
    }
  }
}
//创建请求
// open('get',"./json/ajax.json?user=zhansan",true);
xhr.open('get',"./json/ajax.json",true); //post不允许写在?后边

//发送请求
xhr.send(null);
//设置http头部信息，好像有点问题
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

如何使用Ajax？

发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新

获取异步调用返回的数据

设置响应HTTP请求状态变化的函数
在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：

responseText——从服务器进程返回数据的字符串形式
responseXML——从服务器进程返回的DOM兼容的文档数据对象
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）
status Text伴随状态码的字符串信息

使用JavaScript和DOM实现局部刷新

使用xhr.responseText ()可以获得json内容，但是格式是字符串，所以我们要把他转换成对象才能正常使用：

eval('('+xhr.responseText+")");	//并不建议这种，建议使用parse()，后边有讲

//使用，先var一个data
data = eval('('+xhr.responseText+")");
console.log(data.slider);		//slider是json中的数据

JSON对象的两个方法：

parse()
语法：JSON.parse()
功能：用于将JSON字符串转化成对象

stringify()
语法：JSON.stringify()
功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原

JSON之所以流行，是因为可以把JSON数据结构解析为有用的javascript对象
JSON对象的stringify()和parse()这两个方法可以分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值JavaScript的eval()类似于JSON.parse()方法，可以将json字符串转换为json对象，但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用

渲染数据

<div class="banner" id="banner"></div>

//封装通用的xhr对象，兼容各个版本
function createXHR() {
  //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox、opera等
  if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != 'undefined') {
    //将所有可能出现的版本放在一个数组内
    var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP6.0', 'MSXML2.XMLHTTP5.0', 'MSXML2.XMLHTTP4.0', 'MSXML2.XMLHTTP3.0', 'MSXML2.XMLHTTP2.0']
    //遍历创建XMLHttpRequest对象
    var len = xhrArr.length;
    for (var i = 0; i < len; i++) {
      try {
        //创建XMLHttpRequest对象
        xhr = new ActiveXObject(xhrArr[i]);
        break;
      }
      catch (ex) {

      }
    }
  } else {
    throw new Error('不支持XHR。');
  }
}
// XMLHttpRequest对象
var xhr = createXHR(), data = null;
//相应XMLHttpRequest对象状态变化函数
//onreadystatechange在readystatechange属性发生改变时触发。
xhr.onreadystatechange = function () {
  //异步调用成功，响应内容解析完成，可以在浏览器调用
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //获得服务器返回的数据：
      data = JSON.parse(xhr.responseText);
      //⭐渲染数据到页面中
      // console.log(data.slider);
      renderDataToDom();  //调用函数，后边定义
    }
  }
}
//创建请求
// open('get',"./json/ajax.json?user=zhansan",true);
xhr.open('get', "./json/ajax.json", true); //post不允许写在?后边

//发送请求
xhr.send(null);
//设置http头部信息，好像有点问题
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

function renderDataToDom() {  //⭐
  var img = data.slider, i,
    len = img.length,str='',
    banner = document.getElementById("banner");;
  for (i = 0; i < len; i++) {
    // console.log(img[i].url);
    var a =document.createElement("a");
    //方法一：字符串拼接
    str+= '<a href = "'+img[i].linkUrl+'"><img src="'+img[i].url+'"></a>';
    //方法二：创建然后拼接
    // a.href = img[i].url;
    // a.innerHTML = '<img src=';
    // banner.appendChild(a);
  }
  banner.innerHTML = str;
}

在这里插入图片描述

jq的ajax方法：

$.ajax()

$.get()

$.post()

$.getJson()

<div class="banner" id="banner"></div>

function createXHR() {
  if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != 'undefined') {
    var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP6.0', 'MSXML2.XMLHTTP5.0', 'MSXML2.XMLHTTP4.0', 'MSXML2.XMLHTTP3.0', 'MSXML2.XMLHTTP2.0']
    var len = xhrArr.length;
    for (var i = 0; i < len; i++) {
      try {
        xhr = new ActiveXObject(xhrArr[i]);
        break;
      }
      catch (ex) {
      }
    }
  } else {
    throw new Error('不支持XHR。');
  }
}

$.ajax({
  url: "./json/ajax.json", //请求地址
  type: "post",  //请求方式，post或get
  async: true,   //同步异步
  dataType: "json",  //数据格式
  success: function (imgData) {    //请求成功的回调
    jqrenderData(imgData.slider);	//调用下边的函数
  }
})
//渲染数据
function jqrenderData(data){
  var str="";
  $.each(data,function(index,obj){
    str+= '<a href = "'+obj.linkUrl+'"><img src="'+obj.url+'"></a>';
  })
  $('#banner').html(str);
}