1.ajax初步认识和运用

ajax:

是一种异步的js和xml，js技术，并不是一个新的语言

同步和异步：

同步：事情一步步地去执行，前一件事没做完，后一件事不能做。

异步：事件的执行，不会阻塞主线程代码的执行

event loop

js有一个事件队列，event loop,js遇到异步事件，将异步事件扔到事件队列中，不会阻塞主线程的执行，主线程执行完成后，浏览器会不断轮巡事件队列，如果发现异步事件满足条件，则会将异步事件取出，到主线程执行。

ajax与setTimeout一样，都是异步的，数据交互需要的一定的时间，用异步，加载数据的时候，不会阻塞主线程。

ajax基于http协议，遵循一定的规则，1，请求行2，请求头3，请求体

1.XMLHttpRequest对象：

浏览器内检对象，var xhr = new XMLHttpRequest();

要发送请求（post/get）第一步要创建我们XMLHttpRequest对象

2.发送get请求：

//请求行

xhr.open("get","url?username",true)//参数1:请求类型；参数2请求地址；参数是否异步

//请求头

//get请求不需要设置请求头

//请求体

xhr.send(null);

3.发送post请求：

//请求行

xhr.open("post","url",true);

//请求头

xhr.setRequestHeader("content-type",application/x-www-form-urlencoded");

//请求体

xhr.send("username=123");

响应请求：

ajax是异步的，

需要监听readyState的变化：onreadystatechange方法

监听readyState的变化：onreadystatechange方法

xhr.onreadystatechange = function(){

console.log(xhr.readyState);//2

if(xhr.readyState ====4 ){

//分析响应的内容

//Http响应，状态行，响应头，响应体

//status表示状态码 200成功，404失败

//响应行，状态行

if(xhr.status===200){

//说明成功

//响应头

getAllResponseHeaders()//获取所有响应头信息

getResponseHeaders('属性名')//单个

//响应体

console.log(xhr.responseText)//响应文本

}else{

alert('大兄弟，服务器炸了')

}

}

}

readeState的五种方式：

0，open尚未调用；

1，open已调用；

2，header_received接收到头信息

3，loading 接收到响应主体

4，done响应完成

ajax:

是一种异步的js和xml，js技术，并不是一个新的语言

同步和异步：

同步：事情一步步地去执行，前一件事没做完，后一件事不能做。

异步：事件的执行，不会阻塞主线程代码的执行

event loop

js有一个事件队列，event loop,js遇到异步事件，将异步事件扔到事件队列中，不会阻塞主线程的执行，主线程执行完成后，浏览器会不断轮巡事件队列，如果发现异步事件满足条件，则会将异步事件取出，到主线程执行。

ajax与setTimeout一样，都是异步的，数据交互需要的一定的时间，用异步，加载数据的时候，不会阻塞主线程。

ajax基于http协议，遵循一定的规则，1，请求行2，请求头3，请求体

1.XMLHttpRequest对象：

浏览器内检对象，var xhr = new XMLHttpRequest();

要发送请求（post/get）第一步要创建我们XMLHttpRequest对象

2.发送get请求：

//请求行

xhr.open("get","url?username",true)//参数1:请求类型；参数2请求地址；参数是否异步

//请求头

//get请求不需要设置请求头

//请求体

xhr.send(null);

3.发送post请求：

//请求行

xhr.open("post","url",true);

//请求头

xhr.setRequestHeader("content-type",application/x-www-form-urlencoded");

//请求体

xhr.send("username=123");

响应请求：

ajax是异步的，

需要监听readyState的变化：onreadystatechange方法

监听readyState的变化：onreadystatechange方法

xhr.onreadystatechange = function(){

console.log(xhr.readyState);//2

if(xhr.readyState ====4 ){

//分析响应的内容

//Http响应，状态行，响应头，响应体

//status表示状态码 200成功，404失败

//响应行，状态行

if(xhr.status===200){

//说明成功

//响应头

getAllResponseHeaders()//获取所有响应头信息

getResponseHeaders('属性名')//单个

//响应体

console.log(xhr.responseText)//响应文本

}else{

alert('大兄弟，服务器炸了')

}

}

}

readeState的五种方式：

0，open尚未调用；

1，open已调用；

2，header_received接收到头信息

3，loading 接收到响应主体

4，done响应完成