高速上手XmlHttpRequest_H5之家 - 中国HTML5教程资源分享第一站

引言：

非TGB的。直接跳过吧……

发现里面有非常多既熟悉又陌生的东西。

非常多人看的都是牛腩

刚開始的时候感觉挺怪的。牛腩的js一周，姜浩的js

Ajax基础：

上面啰嗦了半天，如今进入正题。

AsynchronousJavaScript and XML

就是client与server的交互，能够不间断的进行。

即：client发送的请求。不影响client的使用。

同步与异步的差别？

同步：

client向server请求一个数据，页面又一次载入（刷新）。

异步：

client请求数据。

页面上直接得到而不须要刷新。

传统的页面设计：

技术分享

当请求数据的时候，须要等待server传回数据之后才干进行下一步操作。（可能造成无响应的状态）

Ajax方式的页面：

技术分享

而停止响应。

XmlHttpRequest对象，作为client的“秘书”与server进行交互。

技术分享

Ajax入门：五步学会XmlHttpRequest

html页面：

<!DOCTYPE html>  <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <script type="text/javascript"> ? var xmlhttp; function submit() { //此处省略1-4步骤 } function callback() { //此处省略5步骤 } </script> </head> <body> <div>username：</div> <input type="text"/> <input type="button" value="校验" /> <br /> <div></div> </body> </html>

以下是五步流程：

1、创建XmlHttpRequest对象

//1.创建xmlHttpRequest对象 if (window.XMLHttpRequest) { //IE7,IE8,FireFox,Mozillar,Safari,Opera //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera"); xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //IE6,IE5.5,IE5 var activeName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"]; for (var i = 0; i < activeName.length; i++) { try { xmlhttp = new ActiveXObject(activeName[i]); break; } catch (e) { } } } if (xmlhttp === undefined || xmlhttp === null) { alert("当前浏览器不支持创建xmlhttprequest对象，请更换浏览器"); return; }

2、注冊回调函数

//2.注冊回调方法 xmlhttp.onreadystatechange = callback;

注：在注冊回调函数的时候，仅仅须要把函数名赋值就可以。假设赋值callback().则赋值为函数运行的结果值。

3、设置与server交互的參数

//3.设置和server交互的对应參数（Get） var userName=document.getElementById("userName").value; xmlhttp.open("GET", "Ajax?name=" + userName, true); //true 表示异步的方式 //3.设置和server交互的对应參数（Post） //xmlhttp.open("POST","AJAX",true); //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4、向server发送数据

//4.设置向server发送的数据。启动和server端的交互 xmlhttp.send(null);

5、推断与server交互是否完毕，并推断是否有返回数据

//5.推断server端的交互是否完毕，还要推断server端是否返回了数据 if (xmlhttp.readyState === 4) { //表示和server端的交互已经完毕 if (xmlhttp.status === 200) { //表示server的响应代码是200，正确的返回了数据 //纯文本接受数据方式 var message = xmlhttp.responseText; //xml数据相应的dom对象的接受方法 //使用的前提是。server端须要设置content-type为text/xml //var domXml=xmlhttp.responseXML var messageNode = document.getElementById("message"); messageNode.innerHTML = message; } }

注：理解困难的。能够去研究一下xmlhttprequest对象的属性及事件。

唯独以上的html。执行结果肯定有问题…… 执行都没有Webserver。

单纯html客户跟谁交互？