【JavaScript】AJAX总结(异步JavaScript和XML)


AJAX介绍

通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。

AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。

AJAX 应用程序独立于浏览器和平台,是浏览器端技术非服务器端.

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。 

它可以实现在不重载页面的情况下, 比如:用户名注册检测、动态load或创建某块内容。

AJAX 使用 Http 请求

传统的HTTP请求,是每当用户提交输入后服务器都会返回一张新的页面,可有时我们需要的只是更新部分页面. 

XMLHttpRequest对象:

通过使用 XMLHttpRequest 对象,web 开发者可以做到在页面已加载后从服务器更新页面! 

用户可以停留在同一个页面,他不会注意到脚本在后台请求过页面,或向服务器发送过数据。 服务器处理完后会回传结果然后更新页面。

基础语法

var xmlHttp;
function createXmlHttp() {
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}//使用ActiveXObject,其他浏览器使用XMLHttpRequest内建对象

XMLHttpRequest对象三个属性

onreadystatechange 属性

存有处理服务器响应的函数xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 }

readyState 属性

存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange后面的函数就会被执行。


responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
xmlHttp.onreadystatechange = function() { 
//服务器的HTTP状态码==200即响应成功
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
// 从服务器的response获得数据
alert(xmlHttp.responseText);
} else{document.getElementById(“div1”).innerHTML=“<img src=‘loadding.gif’/>”
}
}

向服务器发送一个请求

要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

open() 方法:

第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

send() 方法:

可将请求送往服务器。如:

xmlHttp.open("GET","time.jsp?username=tom",true); 
xmlHttp.send(null);

完整代码 (校验用户名唯一性)

//校验用户名唯一性
function NameOnly(){
//alert(1);
createXmlHttp();
var username = document.getElementById("username").value;
var url = "http://192.168.8.4:8080/reg.jsp?username=" + username + "&date=" + new Date();
//当对象的状态发生改变,就执行一次回调函数
//alert(22);
//alert(url);
xmlHttp.onreadystatechange = function(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4) {//代表服务器已经处理完该请求
//alert(xmlHttp.status);
//if(xmlHttp.status==200 || xmlHttp.status==0) {//状态码==200 代表状态码是正常的(404 500不正常)
//如果在本地运行(如:C:\\ajax\\ helloworld.htm),那么status属性不管是在”成功”还是”页面未找到”的情况下,都返回的是0。
//也就是说没有通过Web服务器形式的Ajax请求返回值都是0;
//alert(22);
var msg = xmlHttp.responseText; //获取服务器端的响应文本
if(msg==1){alert("被注册!!");}
else alert("该账号可以注册");
xmlHttp.responseXml();//如果服务器端返回的是xml文档
//}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com