Ajax的学习

AJAX的学习

AJAX的简介

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。

　　AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

　　AJAX 是一种用于建立快速动态网页的技术。

AJAX的优缺点

　　优势：

　　　　不须要插件支持

　　　　用户体验极佳

　　　　提高Web程序性能

　　　　减轻服务器和宽带的负担

　　缺点：

　　　　前进后退按钮被破坏

　　　　搜索引擎的支持不够

　　　　开发调试工具缺少

XHR的建立与兼容

　　1.建立 XMLHttpRequest 对象的语法：

 　　　　1 variable=new XMLHttpRequest();

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

　　　　 1 variable=new ActiveXObject("Microsoft.XMLHTTP"); 

AJAX如何工做

　　正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要做用。

1. 1. 用户从UI发送请求，JavaScript中调用XMLHttpRequest对象。
   2. HTTP请求由XMLHttpRequest对象发送到服务器。
   3. 服务器使用JSP，PHP，Servlet，ASP.net等与数据库交互。
   4. 检索数据。
   5. 服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。
   6. HTML和CSS数据显示在浏览器上。

 

AJAX的链接（封装过）

　　POST和GET的区别：
    1.POST主要用来发送数据，GET主要用来接受数据；
    2.PSOT发送数据的安全性较好，而GET较差；
    3.POST发送数据不限制大小，而GET大小受限2~100k。
    何时用GET和POST：在数据获取时用GET方式，在操做数据时应使用POST方式。

 

　　1.GET链接

 1 function ajaxGet(url,cb,data){  2     data = data || {};  3     var str = "";  4     for(var i in data){  5         str += `${i}=${data[i]}&`;  6  }  7     var d = new Date();  8     url = url + "?" + str + "__qft="+d.getTime();  9     
10     var xhr = new XMLHttpRequest(); 11     xhr.open("get",url,true); 12     xhr.onreadystatechange = function(){ 13         if(xhr.readyState == 4 && xhr.status == 200){ 14  cb(xhr.responseText) 15  } 16  } 17  xhr.send(); 18 }

　　2.POST链接

 1 function ajaxPost(url,callback,data){  2     data = data || {};  3     var str = "";  4     for(var i in data){  5         str += `${i}=${data[i]}&`;  6  }  7     
 8     var xhr = new XMLHttpRequest();  9     xhr.open("POST",url,true); 10     xhr.onreadystatechange = function(){ 11         if(xhr.readyState == 4 && xhr.status == 200){ 12  callback(xhr.responseText); 13  } 14  } 15     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 16  xhr.send(str); 17 }

拓展

　　XHR　readyState

　　　　AJAX - onreadystatechange 事件

　　　　　　当发送一个请求后，客户端须要肯定这个请求何时会完成，所以，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。

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

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

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

　　回调函数

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

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

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