基本步骤:建立XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应php
1.建立Ajax对象
2.连接到服务器
3.发送请求
4.接受返回值web
对于前面要在if中加window判断是由于,浏览器会对未定义值的变量读取时报错 ,而对于window.variable不会报错,而是报undefined.ajax
首先理解同步与异步
同步:事情一件一件来
异步:多件事情一块儿作
而ajax就是为了异步而生的,例如用户请求表单后,提交到服务器的过程,用户不用等待,能够干别的事情。。。。。。浏览器
//发送请求
主要是判断浏览器和服务器的交互进度和结果缓存
xhr.onreadystatechange=function(){ //oAjax.readyState浏览器和服务器的交互状况 if(oAjax.readyState == 4)//读取完成 { if(oAjax.status==200)//http状态码,用来判断是否成功接受并返回文件 { alert(oAjax.status+" Success" +oAjax.responseText);//读取响应文件里面的TEXT }else{ alert(oAjax.status+" NotFound"); } } };
//将文件名设置随系统时间改变而改变,这样能够避免浏览器缓存旧数据 oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);
(1)responseText:得到字符串形式的响应数据服务器
(2)responseXML:得到xml形式的响应数据app
(3)status和statusText:以数字和文本形式返回Http转态码异步
(4)getAllResponseHeader():得到因此得响应报头async
(5)getResponseHeader():查询响应中的某个字段的值函数
(6)readState属性
"0"请求未初始化,open还未调用
"1":服务器链接已经创建,open已调用
"2":请求已接收,也就是接收到头信息了
"3":请求处理中,也就是接收到响应主体了
"4":请求已经完成,且响应就绪,响应完成了
2.配置发送函数 encodeURI做用对get参数进行编码处理,防止乱码 var param = encodeURI('?username='+uname+'&password='+pw); xhr.open('get','./data.php'+param); 3.发送 xhr.send(null);
2.配置发送函数 xhr.open('post','./33data.php'); //设置请求头信息(对于post提交必须设置请求头) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); 3.发送 var param = 'username='+uname+'&password='+pw; xhr.send(param);
get | post |
2.配置发送函数
encodeURI做用对get参数进行编码处理,防止乱码
var param = encodeURI('?username='+uname+'&password='+pw);
xhr.open('get','./data.php'+param);
3.发送
xhr.send(null);
|
2.配置发送函数
xhr.open('post','./33data.php');
设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.发送
var param = 'username='+uname+'&password='+pw;
xhr.send(param);
|
一、Aja的get提交数据是经过url传递参数,而且须要对参数进行编码处理
二、xhr.send();方法参数固定为null
|
一、Ajax的post提交方式经过xhr.send();
函数传递的参数发送数据,而不是经过url传递数据
二、post提交方式必须设置请求头( xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); )
三、post提交的数据不须要进行编码处理
|
HTTP请求过程
(1)创建TCP链接
(2)web浏览器向web服务器发送请求指令
(3)web浏览器发送请求头信息
(4)web服务器应答
(5)web服务器发送应答头信息
(6)web服务器向浏览器发送数据
(7)web服务器关闭TCP链接
a、HTTP请求方法或者动做(GET/POST)
b、正在请求的URL
c、请求头,包含客户环境信息、身份信息等
d、请求体(正文),包含客户提交的查询字符串信息、表单信息
GET:(1)用于信息获取
(2)使用URL传递参数
(3)String<=2000个字符左右
POST:(1)用于修改服务器上的资源
(2)String<=无穷大
a、一个数字和文字组成的转态码。做用:显示请求是否成功
b、响应头,包含服务器类型、日期、内容类型、长度等
c、响应体,即响应正文,字符串、HTML等
1^^:信息类,表示收到web请求,正在进行处理中
2^^:成功,表示用户请求被正确接收、理解和处理,如200
3^^:重定向,表示请求未成功,客户必须采起动做
4^^:客户端错误,客户提交的信息有误,如400
found:意味着请求中所引用的文档不存在
5^^:服务器错误(最难处理的问题),表示服务器不能完成请求处理,如500