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事件时执行的任务（每次调用可能不尽相同）