纯JavaScript实现异步Ajax的基本原理

 

Ajax实际就是是XMLHttpRequest对象同DOM、(X)HTML和CSS的简称,用于概括异步加载页面内容之技艺。

Ajax 1

Ajax实例

HTML代码如下,包含一个h5标题和一个按钮:

Ajax 2

JS代码如下:

Ajax 3

上述代码中挑大梁目标是XMLHttpRequest,这多亏Ajax的技艺基础。所有现代浏览器都支持
XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 XMLHttpRequest 
用以在后台与服务器交换数据。这象征可以当无重加载整个网页的景下,对网页的有有些开展更新。

javascript技术交流群:499415298

创建 XMLHttpRequest 对象

怀有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建
XMLHttpRequest 对象。

缔造 XMLHttpRequest 对象的语法:

variable=new XMLHttpRequest();

始终版的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

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

以回应拥有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持
XMLHttpRequest 对象。如果支持,则创造 XMLHttpRequest
对象。如果非支持,则开创 ActiveXObject :

Ajax 4

Ajax请求

朝服务器发送请求

万一得以请求发送到服务器,我们运用 XMLHttpRequest 对象的 open() 和 send()
方法:

xmlhttp.open(“GET”,”test1.txt”,true);

xmlhttp.send();

Ajax 5

GET 还是 POST?

和 POST 相比,GET 更简明吗重新快,并且于大部分状况下都能用。

然,在偏下情形屡遭,请以 POST 请求:

  • 束手无策使缓存文件(必须用创新服务器上的文本或者数据库)

  • 于服务器发送大量数(POST 没有数据量限制)

  • 发送包含无亮字符的用户输入时,POST 比 GET 更安宁与否再可靠

GET 请求

一个简易的 GET 请求:

xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);

xmlhttp.send();

当点的例证中,您或许取得的凡缓存的结果。

为了避免这种情景,请向 URL 添加一个唯一的 ID:

xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);

xmlhttp.send();

若是你要经过 GET 方法发送信息,请于 URL 添加音:

xmlhttp.open(“GET”,”demo_get2.asp?fname=Bill&lname=Gates”,true);

xmlhttp.send();

POST 请求

一个简单 POST 请求:

xmlhttp.open(“POST”,”demo_post.asp”,true);

xmlhttp.send();

若要像 HTML 表单那样 POST 数据,请用 setRequestHeader() 来补充加
HTTP 头。然后于 send() 方法被确定而愿意发送的多少:

xmlhttp.open(“POST”,”ajax_test.asp”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

xmlhttp.send(“fname=Bill&lname=Gates”);

Ajax 6

url – 服务器上的文本

open() 方法的 url 参数是服务器上文件的地方:

该文件可以是别项目的公文,比如 .txt 和 .xml,或者服务器脚本文件,比如
.asp 和 .php (在传诵响应之前,能够以服务器上执行任务)。

异步 – True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象要只要用以 AJAX 的言辞,其 open() 方法的 async
参数必须设置也 true:

对 web
开发人员来说,发送异步请求是一个光辉的迈入。很多当服务器执行的职责还相当困难。AJAX
出现前,这可能会见惹应用程序挂于要停。

经过 AJAX,JavaScript 无需待服务器的响应,而是:

  • 以守候服务器响应时实施另外脚本

  • 当响应就绪后对响应进行拍卖

Async = true

当使用 async=true 时,请规定于响应处于 onreadystatechange
事件中的服服帖帖状态时实施之函数:

Ajax 7

javascript技术交流群:499415298

Async = false

如需使用 async=false,请将 open() 方法被的老三个参数改也 false:

xmlhttp.open(“GET”,”test1.txt”,false);

咱俩不引进使用 async=false,但是于部分袖珍的恳求,也是足以的。

请记住,JavaScript
会等到服务器响应就绪才继续执行。如果服务器繁忙或暂缓,应用程序会挂于要停。

xmlhttp.open(“GET”,”test1.txt”,false);

xmlhttp.send();

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

服务器对

假使要取得来自服务器的应,请以 XMLHttpRequest 对象的 responseText 或
responseXML 属性。

内部responseText用于取文本或json格式的数额,而responseXML用于获取XML文档。

Ajax 8

responseText 属性

万一来服务器的响应并非 XML,请用 responseText 属性。

responseText 属性返回字符串形式之响应,因此若可如此使:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

设是json数据,您得这么以:

var result = xmlHttp.responseText;

var person = eval(“(” + result + “)”);

alert(person.name);//读取json数据

回去的json编码的数额要动用eval语句转换成JS对象,然后可以使用.号来博取其特性。

responseXML 属性

一经来服务器Ajax的应是 XML,而且得作为 XML 对象进行辨析,请动
responseXML 属性:

请求books.xml文件,并分析响应:

Ajax 9

Ajax的优缺点

及另技术同,Ajax也闹该优缺点。

亮点是可减少页面刷新请求,实现有数据更新。

短是可访问性降低,搜索引擎不团结,此外如果滥用Ajax请求,反而会招致无谓的求加,比如一般而言通过异步请求加载文章内容是没用的,本来不过设1赖呼吁,被拆分成2次请求(一不好加载页面框架,一不好加载内容)。

咱理应以委要异步刷新的地方采取Ajax。

javascript技术交流群:499415298,欢迎初级及进阶的同伙。

相关文章