|
在Ajax诞生以前，比如说用户填写一个表单，当所有信息填写完成，点击提交按钮，等待五分钟，页面刷新显示邮箱地址重复。填完后点击提交，再进入等待。而Ajax出现后，实现了数据实时交互，提高了用户体验。 HTMLHttpRequest对象var request;if(window.XMLHttpRequest){ request = new XMLHttpRequest();//IE7+,firefox,chrome,opera} else{ request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5}HTTP- 计算机通过网络进行通信的规则。
- 是一种无状态协议，不建立持久的连接。
- 一个完整的HTTP请求过程，通常7个步骤
- 建立TCP连接
- Web浏览器向Web服务器发送请求命令
- Web浏览器发送请求头信息
- Web服务器应答
- Web浏览器发送应答头信息
- Web服务器向浏览器发送数据
- Web服务器关闭TCP连接
请求- HTTP请求方法或动作， GET or POST
- 正在请求的url.
- 请求头，包含一些客户端环境信息，身份验证信息等
- 请求体，即请求正文，包含客户提交的查询字符串信息，表单信息等
- GET: 一般用于信息获取 （幂等）
- 使用URL传递参数
- 对所发送的信息的数量也有限制，一般在2000个字符
- POST：一般用于修改服务器上的资源
响应由三部分组成
* 一个数字和文字组成的状态码，用来显示请求是成功还是失败
* 响应头，同请求头一样包含许多有用的信息，例如服务器类型、日期类型、内容类型和长度等。
* 响应体，即响应正文
HTTP状态码：由3位数字构成，首位数字定义了状态码的类型
* 1XX：信息类，表示收到Web浏览器的请求，正在进一步处理
* 2XX：成功，表示用户请求被正确接收，理解和处理：200 OK
* 3XX：重定向，表示请求没有成功，客户端必须采取进一步的动作
* 4XX：客户端错误，表示客户端提交请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在
* 5XX：服务器错误，表示服务器不能完成对请求的处理：如500 XHR发送请求- open(method,url,async)
- send(string) GET可不填写或none
request.open("GET","get.php",true);request.send();request.open("POST","post.php",true);request.send();request.open("POST","creat.php",true);request.setRequetHeader("Content-type","application/x-www-form-urlencoded");request.send("name=张三&sex =男");XHR取得响应- responseText：获得字符串形式的响应数据
- responseXML：获得XML形式的响应数据
- status和statusText：以数字和文本形式返回HTTP状态码
- getAllResponseHeader(): 取得所有的响应报头
- getResponseHeader(): 查询响应中的某个字段的值
- readyState属性
- 0：请求未初始化，open还没有调用
- 1：服务器连接已建立，open已经调用了
- 2：请求已接收，也就是接收到头信息
- 3：请求处理中，接收到了响应主体
- 4：请求已完成，且响应已就绪，即响应完成
var request = new XMLHttpRequest(); request.open("GET","get.php",true); request.send(); request.onreadystatechange = function(){ if(request.readyState === 4 && request.status === 200){ //做一些处理 request.responseText }}跨域域名组成：协议（http://）子域名(www).主域名(abc.com)端口号(8080)/请求资源地址(script/jquery.js)
| 
收藏
淘帖
踩
