55.6-2应用ajax--发送请求获取响应.ppt

任务5：163邮箱注册功能实现

2单元5.0：模块导学单元5.1：简单注册功能实现单元5.2：图片验证码的创建、插入和刷新单元5.3：应用session机制单元5.4：实现图片验证码的验证功能单元5.5：操作MySQL数据库单元5.6：使用数据库保存注册信息目录

3单元5.6：使用数据库保存注册信息知识点1：应用ajax--创建XMLHttpRequest对象知识点2：应用ajax--发送请求获取响应知识点3：应用ajax--创建服务器端文件知识点4：保存注册信息知识点5：加密用户的密码信息

4教学目标使用XMLHttpRequest对象的open()和send()方法向服务器发送资源请求理解XMLHttpRequest对象的readyState属性和readystatechange事件执行回调函数，获取并显示返回数据

5XMLHttpRequest对象的open()方法格式：open(method,url,boolean)参数说明：method参数取值可以是post或者get，两者传递数据的方式不同；url参数指定请求服务器端要执行的文件；boolean参数指定此请求是否为异步方式，默认为true，表示脚本执行send()方法后不等待服务器的执行结果，而是继续执行脚本代码；若是设置为false，服务器请求是同步进行的，也就是脚本执行send()方法后等待服务器执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码。

6XMLHttpRequest对象的send()方法send()方法的参数可以是null或者是要传递的字符，取决于open()方法中method参数取值是get还是postmthod参数取值为get使用GET方法时，要提交检测的数据需要写到open()方法的url参数中，此时send()方法的参数设置为null。例如：varurl=check.php?emailaddr=+emailAddr;

xml=createXML();

xml.open(GET,url,true);

xml.send(null);

7XMLHttpRequest对象的send()方法method参数取值为post使用POST方法时，要提交的数据将作为send()方法的参数传递给服务器，此时需要设定Content-Type头信息，这样服务器才会知道如何处理上传的内容，设置头信息前必须先调用open()方法。例如：varurl=check.php;varpostStr=emailaddr=+emailAddr;varxml=createXML();xml.open(POST,url,true);xml.setRequestHeader(Content-Type,application/x-www-form-urlencoded;charset=gb2312);xml.send(postStr);

8关于属性readyState应用XMLHttpRequest对象把一个HTTP请求发送到服务器端时，将经历五种状态，每种状态都有一个取值，分别是0、1、2、3、4，这些状态值要通过属性readyState获取，对ajaxreadyState的五种状态解释如下：0－（未初始化）还没有调用send()方法；1－（载入）已调用send()方法，正在发送请求；2－（载入完成）send()方法执行完成，已经接收到全部响应内容；3－（交互）正在解析响应内容；4－（完成）响应内容解析完成，可以在客户端调用了。由此，可以根据readyState属性值是否是4来确定在浏览器端是否可以使用检测返回的结果

9事件readystatechange无论readyState值何时变化，XMLHttpRequest对象都会触发一个readystatechange事件，当该事件被激活时，执行匿名回调函数：xml.onreadystatechange=function(){…}每次执行都要判断属性readyState是否为4，属性status是否为200（该取值表示交易成功，该属性一共有41个状态码，此处不做介绍），以确定浏览器端是否可以使用响应结果

11创建函数check()应用ajax时，发送请求获取响应，需要创建函数check()完成在zhuce.js中定义函数check()，该函数要完成如下功能：获取浏览器端要上传的数据调用函数createXML()得到XMLHttpRequest对象的实例通过实例应用方法open()，这里method参数取值设置为POST通过实例应用setRequestHeader()方法，设置请求的头信息通过实例应用send()方法，将请求发送给服务器在事件readystatechange的匿名