关于ajax的知识点

关于ajax的知识点

一、Ajax发展历史

1、历史起源

1998年 微软公司 IE5 XMLHTTP（技术）

2005年 谷歌 Gmail（邮箱）、谷歌地图 XMLHttpRequest （风靡一时）

2、什么是Ajax

1) Asynchronous ：异步
2) JavaScript ：JS
3) And ：和

4) XML ：XML

所谓的Ajax就是基于Javascript+XML的异步请求

3、Ajax运行平台 （一）Google Chrome

（二）Firefox
（三）InternetExplorer

4、Ajax运行机制

1）传统模式下的同步请求

2）Ajax模式下的异步请求

5、Ajax的应用场景

（一）百度地图、谷歌地图
（二）判断用户名或邮箱是否可用
（三）无刷新分页

6、快速入门

例1：通过单击按钮实时返回服务端数据

二、创建Ajax对象

1、Ajax对象介绍与创建

Ajax对象的兼容性处理：

1) IE模型下：

varxhr=newActiveXObject(‘Microsoft.XMLHTTP’);(IE7以下版本，在 IE8也支持)

2) W3C模型下

var xhr=newXMLHttpRequest(); （W3C浏览器与IE高版本浏览器)
注意：目前IE 浏览器的大部分是IE8 以上，所以使用var xhr=newXMLHttpRequest()创建
对象

2、Ajax对象中的常用属性与方法

1）常用方法：

 open(method,服务器的url) ：初始化Ajax对象

1 method：模拟http的get与post请求，如get请求， ’get’;否则则为’post’;                                                                 2 url：要请求的url地址

 setRequestHeader(header,value) ：设置请求头信息
1 header：请求头参数
2 value：设置请求头的值

 send(content) ：发送Ajax请求
1 content：http请求时所传递的参数
2 如果是get请求，该值为null
3 如果是post请求，该值为要传递的参数

2）常用属性：

 onreadystatechange ：                                                                                                                                        Ajax状态码改变时所调用的回调函数

 readyState ：                                                                                                                                                        Ajax状态码
a. 0：表示对象已建立，但未初始化 newXMLHttpRequest()
b. 1：表示对象已初始化，但未发送 open()
c. 2：已调用send方法进行请求 send()
d. 3：正在接收数据（接收到一部分）
e. 4：接收完成

 status: 响应状态码 200（成功） 404（页面未找到）304（缓存）

 responseText ：响应文本信息
当服务器端返回的是字符串类型的文本数据时，Ajax通过responseText进行调用

三、Ajax请求中的GET请求

1、Ajax中的get请求四步走：
1、创建Ajax对象 xhr=newXMLHttpRequest();
2、初始化Ajax（打开连接）xhr.open(‘get’,’url’+数据)
3、发送Ajax请求 xhr.send(null)
4、设置回调函数、监听 xhr.onreadystatechange=function(){}（建议写在2之后）
注：根据Ajax状态码与响应状态码进行相关处理 xhr.readyState==4&&xhr.status==200
获取响应文本信息：xhr.responseText
例1：判断用户名或邮箱是否存在

四、Ajax中的post请求

1、回顾get与post请求的区别

1) 大小不同：

get请求有大小限制 2k
post请求无大小限制(在HTTP中)，但从PHP的角度，其是有大小限制的3M（php.ini） ，一
般情况下，通常CMS或框架会对上传文件进行2M限制

2) 参数不同：

get请求其参数是追加在url的尾部
post请求其参数是追加在空白行

3) 安全方面：

post安全性要高于 get请求

2、Ajax中的post请求
Ajax中的post请求五步走：
1）创建ajax对象 xhr=newXMLHttpRequest();
2）初始化Ajax对象 xhr.open(‘post’,url)
3）设置请求头信息
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded7’)
4）发送Ajax请求 xhr.send(data)
5）设置回调函数、监听 xhr.onreadystatechange=function(){} 建议写在2）之后。
根据Ajax状态码与响应状态码进行相关处理 xhr.readyState==4&&xhr.status==200