黑马程序员-初探ajax技术

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

AJAX的优势

　　1.减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造

成的负担；

　 2.无刷新更新页面，减少用户实际和心理等待时间；

3.更好的用户体验；

4.也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的

负担，节约空间和带宽租用成本；

5.Ajax由于可以调用外部数据；

工作原理图



AJAX的运用

//javascript方法实现AJAX



function ajaxFunction(){

//判断浏览器

//核心XmlHttpRequest对象 xmlHttp

var xmlHttp,question,answer;

try{

xmlHttp=new XMLHttpRequest();

}catch(e){

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

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

}catch(e){

alert("您的浏览器不支持Ajax!");

return false;

}

}

}

//open方法初始化XmlHttpRequest，以get形式请求，访问地址http://localhost/aa/myweb/usename.xml，true

是异步发送，

xmlHttp.open("GET","http://localhost/aa/myweb/usename.xml",true);//创建一个http请求

xmlHttp.send(null);////发送请求

//onreadystatechange事件检查XmlHttpRequest对象实例的属性来获知调用的状态

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4){//如果请求完成加载

usenames=xmlHttp.responseXML.getElementsByTagName("usename");//读取服务器中xml文件的数据

for(var i=0;i<usenames.length;i++){

if(document.myform.usename.value==usenames[i].firstChild.nodeValue){

document.getElementById("msg").innerHTML="用户名已存在！";

document.getElementById("msg").style.color="red";

return false;

}

}

document.getElementById("msg").innerHTML="用户名不存在，可使用！";

document.getElementById("msg").style.color="green";

}

}

}

$.ajax({

type: "post",//post请求方式

contentType: "application/json",//

url: "ajax_1.asmx/HelloWorld",//访问地址

data: "{}",//参数

dataType: 'json',//服务器返回的数据类型

success: function(data) {//回掉函数

alert(data.d);
}
});