1.同步,异步区别:
同步:通俗理解代码必须按顺序执行,后面代码必须等待前面代码执行完成才能执行,即当客户端发送请求到服务器端,服务器返回响应之前,客户端都处于等待,卡死状态
异步:前后代码同时执行,后面代码不需等待前面代码执行完成,即客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可随意做其他事情不会被卡死。
2.Ajax概述:Ajax是一种快速创建动态网页的技术。通过后台与服务器进行少量数据交换,Ajax可使网页实现异步更新。即在不重新加载整个网页的情况下,对网页的某部分进行更新。
运行原理:页面发起请求发送给浏览器内核的Ajax引擎,Ajax引擎会提交请求到服务器端,这期间用户可进行任意操作,直到服务器端将数据返回给Ajax引擎,触发设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
3.使用Ajax原因:传统web交互是用户发送一个http请求服务器,服务器收到后作出响应并返回一个新页面给用户,在服务器处理客户端请求时,客户只能等待,且无论请求数据多么简单,都会返回一个完整的HTML页面,这样每次都需浪费时间与带宽读取页面,导致用户界面的响应比本地应用慢得多,而Ajax刚好解决了这个缺点。
4.XMLHttpRequest对象:是Ajax基础,XMLHttpRequest用于在后台与服务器交换数据;即在不重新加载整个网页的情况下,对网页的部分进行更新,目前所有浏览器都支持XHLHttpRequest。
属性:
(1)readyState:Http请求的状态,当一个XMLHttpRequest初次创建时,这个属性的值从0开始,直到接收到完整的HTTP响应,这个值增加到4。
readyState的值不会递减,除非当一个请求在处理过程中的时候调用了abort()或open()方法。酶促这个属性的值增加的时候,都会触发onreadystatechange事件句柄;
(2)responseText:目前为止为服务器接收的响应(不包括头部),或者如果还没接收到数据的话,就是空字符串。
readyState<3 responseText是一个空字符串;
readyState=3 responseText返回目前已接收的响应部分;
readyState=4 responseText保存完整的响应体;
(3)responseXML:对请求的响应,解析为XML并作为document对象返回。
(4)status:由服务器返回的HTTP状态代码,200表示成功,404表示“Not Found”错误;readyState<3读取这一属性会导致一个异常;
(5)statusText:这个属性用名称而不是数字指定了请求的HTTP的状态代码。
方法:
(1)abort():取消当前响应。关闭连接并且结束任何未决的网络活动。即把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。
(2)getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回。
(3)getResponseHeader():返回指定的Http响应头部的值,其参数是要返回的HTTP响应头部的名称。如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。
(4)open():初始化HTTP请求参数,(URL和HTTP)但不发送请求。
语法:open(method, url, async, username, password)
参数:method用于请求的HTTP方法(get,post,head)
url请求的主体。多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
async指示请求使用应该异步执行(false同步请求true异步请求)
username和password可选参数,为url所需的授权提供认证资格。若指定,它们会覆盖 url 自己指定的任何资格。
(5)send():发送HTTP请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体。
语法:send(body)
如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT,body 参数指定了请求体,作为一个字符串或者 Document 对象
(6)setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求。
语法:setRequestHeader(name, value)
参数:name设置头部名称,不包括空白,冒号或换行
Value是头部的值,不包括换行;
说明:setRequestHeader() 方法指定了一个 HTTP 请求的头部,它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用。如open()之后send()之前
事件句柄:onreadystatechange注册事件
5. 使用方法5步
(1)创建XMLHTTPRequest对象 (new XMLHTTLRequest)
(2)使用open方法设置和服务器端交互
(3)设置发送的数据,开始和服务器端交互 send()
(4)注册事件 onreadystatechange
(5)更新界面
6.两种方法请求示例
(1)get请求:
//1.创建服务器交互对象
var ajax=new XMLHttpRequest();
//2.使用open方法设置和服务器端交互 建立连接
ajax.open("get","./data/data.txt",true);//异步
//3.发送请求
ajax.send();
//4.注册事件onreadystatechange状态改变就会被调用
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//5.进入则成功,更新界面
console.log(ajax.responseText);//输出相应内容
}
}
(2)post请求
var ajax=new XMLHttpRequest();
ajax.open("post","./data/data.txt",true); //true异步
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//console.log(ajax.responseText);
}
};
console.log(ajax.responseText);//会输出空 前后同时执行
(3)封装两种方式为一个方法
ajax_method("./data/data.txt","post");
/*封装为一个方法*/
function ajax_method(url,method,data){
var ajax=new XMLHttpRequest();
//get post方法判断
if(method=="get"){
//get请求 ?data方式传值
ajax.open(method,url);
if(data){ //若有值
url+='?';
url+=data;
}else{
ajax.send();
}
}else { //post请求
ajax.open(method,url);
if(data){ //若有值
ajax.send(data);
}else{
ajax.send();
}
}
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
console.log(ajax.responseText);
}
}
}