ajax:Asynchronous JavaScript and XML (异步的JavaScript和XML)
环境:需要在搭建的服务器下运行
http是计算机通过网络进行通信的规则 浏览器想服务器请求信息和服务 http是一种无状态的协议
一个完整的HTTP请求有7个步奏
1.建立tcp连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头信息
4.web服务器应答
5.web服务器发送应答头信息
6.web服务器向浏览器发发送数据
7.web服务器关闭tcp连接
一个http请求一般由四部分组成
1.Http请求的方法或动作,比如是GET还是POST请求
2.正在请求的URL,总得知道请求的地址是什么
3.请求头,包含一些客户端环境信息,身份验证信息等
4.请求体,也就是请求正文
get:一般用于信息获取 使用URL传递参数 对所发送的信息的数量也有限制,一般在2000个字符左右
post:一般用于修改服务器上的资源 对所发送信息的数量无限制
一个HTTP响应一般由3部分组成
1.一个数字和文字组成的状态码,用来显示请求是成功还是失败
2.响应头。响应头也和请求头一样包含许多有用的信息。列如服务器类型 日期时间 内容类型和长度等
3.响应体,也就是响应正文。
http状态码有3位数子构成,其中首位数字定义了状态码的类型:
1xx:信息类,表示收到web浏览器的请求
2xx:成功,表示用户请求被正确接收,理解和处理;列如200 ok
3xx:重定向,表示请求没有成功,客户必须采取进一步动作
4xx:客户端错误,表示客户端提交的请求有错误;;列如404 not found
5xx:服务器错误,表示服务器不能完成请求的处理;列如500
创建XMLHttpRequest对象
if(window.XMLHttprequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");//ie5 ie6
}
发送请求
open(method,url,async)//open("get","get.php")
send(string)//post方式 string必填
当是post请求时
reques.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=小谢&age=28");
当是post 方式的请求时需要设置响应头的信息。get方式的请求不需要
获得相应
responseText:获得字符串形式的响应数据
respinse.XML:获得XML形式的相应数据
status和statusText:以数字和文本的形式返回http状态码
getAllRespinseHeader():获得所有的响应报头
getRespinseHeader():查询相应中的某个字段的值
监听readystate属性
:请求未初始化,open还没被调用
1:服务器连接已建立,open已经建立
2:请求已接收,也就是接收到了头信息
3:请求处理中,也就是接收到响应主体了
4:请求完成,且响应已就绪,也就是响应完成了
基本上一个AJAX程序是这样的步奏
var request=new XMLHttpRequest();//创建requeat对象
request.open("GET","get.php",true);//get方式的请求以及请求的地址和类型
request.send();//发送请求
request.onreadyStatechange=function(){ //监听事件
if(request.readyState===4&&request.status===200){ //当响应完成并且用户请求被陈宫接收
request.responseText;//返回的相应内容文本的形式
}
}
对于JSON数据的解析eval() JSON.parse()
var jsondate='{"infour":[{"name":"小谢","age":27},{"name":"小德","age":26},{"name":"小勇","age":25}]}';
var jsonobj=eval('('+jsondate+')');//eval()函数解析
jsonobj.infour[0].name;
var jsonobj1=JSON.parse()
jsonobj1.infour[0].name;
对于evlal()方法需要注意,如果有恶意代码,先执行代码 再解析代码 不推荐用eval()
jsonlint.com 在线的json校验工具
跨域
1代理的方式,需要在后台服务器设置
2.JSONP的方式,和Jquery结合使用,只支持get方式的跨域
3.html5 支持XHR2:XMLHttprequest Level2'' 已经实现跨域访问。只需在服务器端做小小的改动即可,在后台文件头部声明即可
header('Access-Control-Allow-Origin:*');
hesder('Access-Cortrol-Allow-Metnods:POST,GET');
领取专属 10元无门槛券
私享最新 技术干货