1 .XMLHttpRequest是ajax的官方的名称。一个ajax应用程序就是创建一个ajax对象,对象调用其方法和属性的一个过程
- 创建ajax对象
var xhr=new XML HttpRequest() 重点掌握
低版本浏览器 （IE6.7.8）
var xhr=ActiveXObject('Microsoft.XMLHTTP'
更低版本IE浏览器(IE5,IE4)
var xhr=ActiveXObject('Msxml2.XMLHTTP')
var xhr=ActiveXObject('Msxml3.XMLHTTP')
- ajax常用的方法和属性
常用方法:
open(method,url,[async]):建立一个http连接
method:请求的方法,get/post
url:请求的url地址
async:是否异步请求,默认为true为异步,false同步
send(content):发送一个http请求
content: 发送请求的数据,如果是get请求content直接写null,如果是post请求需要拼接请求字符串,形如:name=xiaokeai&age=18
setRequestHeader(header,value) :设置请求头
header:请求头名称
value:请求头的值
abort:终止一个ajax请求
常用属性:
readyState:ajax请求的状态,有五个值0,1,2,3,4
0:初始化对象还没有调用open()方法
1: 已经调用了open()方法 .还没有调用send()方法
2:已经调用了send()方法
3.已经开始接受服务器返回来的数据,但是不完整.
4:完全接收服务器返回来的数据,请求完毕
onreadystatechange :可以监听ajax状态的一个改变 只能监听1,2,3,4状态,因为状态0没有一个相对变化的过程.
status :http响应状态码 200:ok 404:not found 304 :not modified ,5XX(一般都是服务器相关的错误)
responseText :接收服务器返回来的字符串数据.(html.css,js). php echo 'fasfd';
responseXML :接收服务器返回来的xml数据. php: echo $xml;
- 总结ajax请求(五步骤)
①创建ajax对象 var xhr=new XMLHttpRequest()
②建立一个http连接 xhr.open('get',url,true);
③发送一个http请求 xhr.send(null);
④给ajax状态绑定一个回调函数 xhr.onreadystatechange=function(){};
⑤判断ajax的状态是否等于4,就做相应的业务逻辑 xhr.readyState==4 接收字符串xhr.responseText
- get和post请求的区别
①给服务器传递的数据量不同
get方式的大小是受限于浏览器，大部分浏览器是2k左右的限制
每个浏览器的限制不一样 chrome就是8K
1k=1024byte 2k=2048by
http://网址/index.php?name=tom
上述请求通过get方式传递了9个字节的信息
post原则没有限制，php.ini对其限制为8M
②安全方面
post传递数据较安全
③传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数
http://网址/index.php?name=tom&age=23&addr=beijing
蓝色部分就是请求字符串，就是一些"名-值"对，中间使用&符号连接。
post方式是模拟form表单把数据给传递给服务器
- post请求总结(六步走):
①,创建一个ajax对象
②.建立一个http连接
③设置请求头 xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded');
④发送http请求
⑤给ajax状态的改变设置回调函数
⑥判断ajax状态是否等于4,然后组相应的业务逻辑处理
onreadystatechange可以监听ajax状态4个: