Ajax1.docx

1、Ajax1Ajax一、 介绍1、 web开发相关技术htmlcssjavascript客户端语言phpjspasp服务器端语言2、 什么是ajax Asynchronous ：异步 JavaScript And ：和 XML ajax技术就是利用javascript和xml实现异步交互的功能javascriptjson xml发展历程 1998年 2005年运行平台 Google Chrome Mozilla Firefox Internet Explorer Opera Konqueror Safari 3、 ajax运行原理1） 传统的web应用程序运行原理：2） ajax程序运行原理：4

2、、 快速入门二、 Ajax对象XMLHttpRequest必须要创建一个对象1、 创建ajax对象的方式1)2)在IE的高版本中，已经支持了XMLHttpRequest类2、 解决兼容性创建公共文件：public.js在需要使用ajax对象的页面中，包含以上文件3、 ajax对象的相关属性和方法 open(method,url)初始化ajax对象method：请求方式 get、posturl：请求地址 setRequestHeader(header,value)设置请求头信息header：请求头名称value：请求头的信息 send(content)发送请求只有当ajax对象的send方法被调

3、用时，才会发送请求content：post请求时所传递的数据get请求时这里直接设置为“null” onreadystatechange表示当ajax对象状态码发生改变时所触发的回调函数它的值是一个函数首地址（匿名函数）xhr.onreadystatechange=function();或xhr.onreadystatechange=display; readyState ajax对象的状态码状态码就是一个数字 040：表示对象已建立，但未初始化1：表示对象已初始化，但未发送2：已调用send方法进行请求3：正在接收数据（接收到一部分）4：接收完成 statusajax对象接收到的http响应

4、状态码 如：200 302 304 404 statusTextajax对象接收到的http响应状态文本 如：ok、not found reponseTextajax对象接收到http响应主体字符串 （text/html） responseXMLajax对象接收到的http响应主体内容（text/xml）关于状态码解释：关于状态码案例：三、 发送GET请求1、 向服务器发送用户名，并返回hello,zhangsan!html：if(xhr.readyState=4)ajax对象状态每次发生改变时，都会触发生这个回调函数，只有当状态码为4时，也就是说数据才真正接收完毕，这时我们再对返回来的数据进

5、行处理。php：return hello.$name; return ：返回，将结果返回给php程序本身echo hello.$name; echo ：输出，利用http协议将数据响应给客户端2、 找出上题的不足之处1）请求错误的页面如果将请求地址改为一个不存在的页面地址，那么服务器仍然会返回一个错误信息，而我们的程序应该在得到一个正确的返回结果后才去对数据进行处理。或2） 解决IE下缓存问题将服务器端的PHP程序略作修改在IE下，仍然输出hello,zhangsan在其它浏览器中，是正常输出原因：在IE中，默认有缓存功能，将每次获取的php文件的输出结果缓存下来，下次ajax对象在请求时，如

6、果在缓存目录下，找到对应缓存文件，就直接使用缓存文件。如何解决？ 随机数 Math.random(); 时间 new Date.getTime(); 以上两种方法确保每次请求的url是唯一的 setRequestHeader(If-Modified-Since,0);这种方法设置ajax对象的请求头 if-modified-since，强制让ajax对象发送请求0：表示文件最后修改时间，会和服务器上这个资源文件最后修改时间进行比较，肯定是不相，所以服务器返回了最新数据。以上三种方式并没有根本上解决缓存问题，前二种方式更是缓存下来N个文件。 header(Cache-Control: no-ca

7、che, must-revalidate);header：向http响应头中写数据header(location:index.php);设置http响应头中的cache-control选项“告诉”浏览器：你不要缓存，必须每次重新请求。3、 检查用户名是否可用html：php：运行结果：四、 发送post请求1、 get和post的区别：1） get请求将参数放到请求地址url的后面2） post请求时将参数放在http请求空白行的后面3） get请求时参数大小有限制4） post请求理论上对参数大小无限制5） post比get安全一些2、 其它不同：get请求：post请求：通过比较，可以看出

8、，post请求时，除了参数格式不同之外，还比get请求多了一个Content-type的请求头，它的值是application/x-www-form-urlencoded，表示本次提交的数据是字符数据，同时post还可以同时提交二进制数据和字符数据，如：multipart/form-dataajax发送请求其实就是模拟http请求ajax对象的post请求也要加上content-type的请求头。3、 代码： xmlhttp.open(post,“action.php);postaction.php 后面没有参数 xmlhttp.setRequestHeader(Content-Type,ap

9、plication/x-www-form-urlencoded);设置请求头信息 content-type：传送数据的数据类型 application/x-www-form-urlencoded ：表示数据是字符数据 xmlhttp.send(data);data：会自动将参数放到请求空白行的后面html代码：php代码：通过测试，发现ajax对象的post请求不会产生缓存问题4、 计算两个数的和html：php：运行结果：如果需要从服务器端返回多个结果，可以将结果拼接一个字符串，使用一个指定的分隔符，如：“|”，在客户端程序中，再将字符串按照分隔符进行分割。5、 文件上传 method=post以 post形式提交数据 enctype=multipart/form-data指定提交的数据可以是二进制数据或字符数据demo09.htmldemo09.phpupload.php五、关于Ajax的一点补充无刷新是Ajax最大的特点，但不是Ajax技术出现的目的如果使用传统的web应用程序，用户在登录时，整个页面重新刷新并请求新的页面地址，新的页面在验证之后，再重新跳转回来，但是对用户而言，除了登录界面之外，其它版本没有发生改变使用ajax程序，可以异步发送请求，改变的仅仅是登录界面，其它版本没有重新请求和刷求，所以节省网络传输的流量。可以快速获取服务器端数据