AJAX学习笔记1

1.同步和异步

例如表单验证，不需要提交，就可以时实的进行信息提示

2.XHR(XMLHttpRequest)

有些的浏览器版本是不支持XHR的，如IE6和IE5,但现在一般不用考虑

在jquery里使用不用考虑这些问题：$.get(url,callback,'json')

在js里面需要以下代码

var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera等
}else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5 
}

3.HTTP请求

7步骤：

• 建立TCP连接
• Web浏览器向Web服务器发送请求命令
• Web浏览器发送请求头信息
• web服务器应答
• web服务器发送应答头信息
• web服务器向浏览器发送数据
• web服务器关闭TCP连接

4部分：

• 请求的动作：get或post
• 地址URL
• 请求头（客户端环境信息，身份验证信息等）
• 请求体（即请求正文，包括表单信息）

    例如：

状态码：（request.status）

• 1XX：信息类，表示收到web浏览器请求，正在进一步的处理中
• 2XX：成功，表示用户请求被正确接受，理解和处理 例如：200 OK
• 3XX：重定向，表示请求没有成功，客户端必须采取进一步的动作
• 4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在
• 5XX：服务器错误，表示服务器不能完成对请求的处理，如500

4.XHR发送请求

open(method,url,async)其中async表示异步还是同步，默认为true，异步

send(string)如果是get方法，则不用写string，mor内容在URL里面

例如：

request.open("GET","get.php",true);

request.send();

request.open("POST","get.php",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头，告诉浏览器要发送一个表单，不发送文件的话就可以这样写

request.send("name=zkq");

5.XHR取得响应

readyState

• 0：请求未初始化，open还没有调用
• 1：服务器连接已建立，open已经调用了
• 2：请求已接收，也就是接受到头信息了
• 3：请求处理中，也就是接受到响应主体了
• 4：请求已完成，且响应已就绪，也就是响应完成了

var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
    if(request.readyState==4 && request.status===200){
          //做一些事情例如：
          //request.responseText:获得字符串形式的响应数据
          //request.responseXML:获得XML形式的响应数据        
}
}

6.代码

js小函数

//获取dom

var getDOM = function(id){     return document.getElementById(id); }

//dom绑定事件，fn为事件发生时执行的函数var addEvent = function(id,event,fn){ var el = getDOM(id)||document; if(el.addEventListener){ el.addEventListener(event,fn,false);//非IE } else if(el.attachEvent){ el.attachEvent('on'+event,fn);//IE } el.onclick = function(){}

}

js总的ajax代码：

   在ActiveXObject里的 msxml指微软的 xml语言 解析器，用来解释 xml语言 的。就好像html文本下载到本地，浏览器会检查html的语法，解释html文本然后显示出来一样。要使用 xml文件 就一定要用到xml parser。不过不仅仅微软有，像ibm,sun都有自己的xml
parser。

它的全名是：「Microsoft XML Core Services」 ，主要是用来执行或开发经由 XML 所设计的最新应用程序。

        var ajaxGet = function(url,callback){
 		var xhr=null;
 		if(window.XMLHttpRequest){
 			xhr=new window.XMLHttpRequest();
 		}else if(window.ActiveXObject){
 			xhr=new ActiveXObject("Msxml2.XMLHTTP");
 		}
 		
 		xhr.onreadystatechange = function(){
 			if(xhr.readyState==4 && xhr.status ==200){
 				callback(JSON.parse(xhr.responseText));//执行下面的function（d），d为reponseText
 			}	
 		}
 		xhr.open('get',url,true);
 		xhr.send(null);
 	}

//其中上面的callback就是function（d）{}

ajaxGet('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
 			alert(d);
 			var d = d.AS.Results[0].Suggests;
 			var html='';
 			for(var i=0;i<d.length;i++){
 				html+='<li>'+d[i].Txt+'</li>';
 			}