javascript第十七讲：Ajax基础

Click to edit Master title style,hello world,程序,Second level,Third level,Fourth level,1-,*,北京源智天下科技有限公司,联系方式：,第十七讲：,Ajax,基础,讲师：杨贵,e-mail:,http:/ ActiveX(“,Microsoft.XMLHTTP,”);/,创建,XMLHttpRequest,对象,02,XmlHtpRq.open(“GET”,”index.php?id,=12”);/,创建,HTTP,请求,提示：,HTTP,请求方式分两种，即,POST,和,GET,方式。,设置,HTTP,响应回调函数,XMLHttpRequest,对象根据自身状态的变化调用相应的函数，用户因此也抓到处理数据的时机。,通过设置,readystatechange,事件的处理函数，即可监听,XMLHttpRequest,对象状态的变化,。,01/,程序开始,02,var,XmlHtpRq,=new ActiveX(“,Microsoft.XMLHTTP,”);/,创建,XMLHttpRequest,对象,03,XmlHtpRq.readystatechange,=function(,obj,)/,readystatechange,事件处理程序,04,05/,在此根据各种状态进行不同的操作,06,07,发送,HTTP,请求,通常使用,XMLHttpRequest,对象的,send,方法完成任务，该方法带一个可选参数。当请求是,POST,方式时该参数包含发往服务器的数据，是,GET,方式是该参数被忽略。,XMLHttpRequest.send(data,);/,带参数,XMLHttpRequest.send(null,);/,不带参数,一个完整的,Ajax,实例,很多网站的会员注册页面，利用,Ajax,技术在用户填写表单但还未发送表单时将已经填好用户名发送到服务器进行验证，如果存在相同用户名的用户则输出提示。,在会员注册页面实现用户重名检测的功能，如果填写的用户名已经存在则给出更换提示，客户端程序如,下：,一个完整的,Ajax,实例,05,06,用户名：,07,08,(,填入用户名，例如,admin),09,10,/,脚本开始,11,var,xmlHtpRq,;/,保存,XMLHttpRequest,对象引用,12,function,OnStatusChange,()/,状态事件处理程序,13,14,if(,xmlHtpRq.readyState,=4)/,正常响应状态,15,16,if(,xmlHtpRq.status,=200)/,正确的接收响应数据,17,18,document.getElementById(message).innerHTML,=,xmlHtpRq.responseText,;,19,20,else/,状态不正常,21,22,document.getElementById(message).innerHTML,=,xmlHtpRq.status,;/,输出状态码,23,24,25,一个完整的,Ajax,实例,26,function,OnBlur,(,obj,)/,文本框失去焦点时执行,27,28,xmlHtpRq,=new,ActiveXObject(Microsoft.XMLHTTP,);/,创建,XMLHttpRequest,对象,29,url,=http:/,localhost/server.php?username,=+,obj.value,;/,构建,URL,30,xmlHtpRq.open(GET,url,true);/,打开连接,31,xmlHtpRq.onreadystatechange,=,OnStatusChange,;/,注册状态事件侦听器,32,xmlHtpRq.send(null,);/,发送请求,33,34,35,一个完整的,Ajax,实例,01,