Ajax使用

Ajax

AJAX (Asynchronous JavaScript and XML)即异步的 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

1.ajax创建XHR对象

• 创建 XMLHttpRequest 对象的语法：

  • xmlhttp=new XMLHttpRequest();

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

  • xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

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

let xmlhttp;
if (window.XMLHttpRequest)
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
else
	// IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

2.ajax向服务器发送请求

若想将请求发送到服务器，需使用 XMLHttpRequest 对象的 open() 和 send() 方法：

• xmlhttp.open(请求类型,url地址,async);
  • 请求类型为’GET’或’POST’
  • url地址为文件在服务器上的位置
  • async设置同步（false）和异步（true），默认为true
• xmlhttp.send(string);
  • 参数为向后端发送的参数，可以为空，仅用于POST请求

(1)GET 和 POST的区别

是两种在客户端和服务器端进行请求-响应的常用方法

• GET：从指定的资源请求数据
  • GET 基本上用于从服务器获得（取回）数据。
  • GET 更简单也更快，并且在大部分情况下都能用。
  • 注：GET 方法可能返回缓存数据。
• POST：向指定的资源提交要处理的数据
  • POST 也可用于从服务器获取数据。
  • POST 方法不会缓存数据，并且常用于连同请求一起发送数据
  • POST 没有数据量限制
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

(2)get类型

xmlhttp.open("GET","/ajax_get.php",true);
xmlhttp.send();

为了避免得到的是缓存的结果，可以添加一个唯一的id

xmlhttp.open("GET","/ajax_get.php?id="+id,true);

若想使用get请求发送数据，可以添加到url

xmlhttp.open("GET","/ajax_get.php?id=1&name=user",true);

(3)post类型

xmlhttp.open("POST","/ajax_get.php",true);
xmlhttp.send();

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

xmlhttp.open("POST","/ajax_post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 传递字符串类型
xmlhttp.send("id=1&name=user");
// 传递字典类型 
xmlhttp.send({id:1,name:user});
// 传递json类型数据
xmlhttp.send(JSON.stringify({ 
    "id": 1,
    "response":{"name":"user","gender":"man"} 
}))

3.ajax获取服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

  eg:
  document.querySelector(".box").innerHTML=xmlhttp.responseText;
  

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

  xmlDoc=xmlhttp.responseXML;
  txt="";
  // 获取xmlDoc中的.value
  box=xmlDoc.querySelectorAll(".value");
  for (i=0;i<box.length;i++)
  	//将所有.box的数据进行合并
      txt=txt + box[i].childNodes[0].nodeValue + "
  ";
  // 将txt输入到本页面.box内
  document.querySelector(".box").innerHTML=txt;
  

4.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个重要的属性：

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

readyState状态：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

// 当 readyState 等于 4 且状态为 200 时，表示响应已就绪
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        document.querySelector(".box").innerHTML=xmlhttp.responseText;      
}

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

let xmlhttp
function loadXMLDoc(url,func){
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=new ActiveXOBject("microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=func;
    xmlhttp.open("get",url,true);
    xmlhttp.send();
}
function myFunction()
{
    // 调用loadXMLDoc()的函数
    loadXMLDoc("/ajax_data.txt",function()
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.querySelector(".box").innerHTML=xmlhttp.responseText;  
    });
}

5.jQuery下的ajax

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

(1)load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

• selector：标签名

• URL：需要加载的 URL（必选）

• data：规定与请求一同发送的查询字符串键/值对集合（可选）

• callback：参数是 load() 方法完成后所执行的函数名称（可选）

// button点击事件
$("button").click(function(){
    // 获取data.txt中id为value的标签值
  $("#div").load("data.txt #value",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

(2)jQuery中的$.get() 方法 和 $post() 方法

• $.get(URL,callback);

$.get("/data/GetData.php",function(data,status){
    alert("Data:"+ data);
  });

• $.post(URL,data,callback);

$.post("/data/PostData.php",
  {//字典类型
    name:"user",
    gender:"man"
  },//执行函数
  function(data,status){
    alert("Data: "+data);
  });