AJAX简介

ajax概述

ajax全称 异步的JavaScript和xml 他是用于发送http请求（支持异步请求）

ajax的特点

1.支持异步请求

2.实现局部刷新

3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录）

ajax的运用

XMLHttpRequest（有兼容问题）

他是ajax的核心对象（负责请求的对象）

//兼容各大浏览器 
function createXhr(){
     if(window.XMLHttpRequest){
         return new XMLHttpRequest() 
    }
    return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6 
}

open 方法（打开 一 个地址以对应设置请求方式去请求）

xhr.open('GET','http://www.baidu.com')

send 方法 （发送请求 他可以携带请求体）

xhr.send()

onreadystatechange 监听的事件

xhr.onreadystatechange = function(){
     if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
         //接收数据 
    } 
}

readyState 一 个请求状态码

0 没有请求

1 准备发送请求

2  请求已经发送

3 请求已经发送且部分响应已经得到

4 请求完成响应结束

status http 状态码

1 开头 成功继续操作

2 开头 已经完成

3.开头 重定向

4.开头 客户端错误

5.开头 服务器错误

responseText 返回结果内容

xhr.responseText //他获取到是string类型

responseXML 返回的 xml 类型的内容

xhr.responseXML

get请求

//1.创建请求对象 
let xhr = new XMLHttpRequest() 
// 2.设置请求地址（携带数据） 
xhr.open('GET',"https://jsonplaceholder.typicode.com/todos?_page=10&_limit=10") 
//参数1请求的方法 get(打开浏览器) 请求 post请求（表单提交） 参数2为请求的地址 
// 4.监听请求状态 
xhr.onreadystatechange = function(){
     // 5.请求完成以后 读取响应的数据 
     if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)) {                             
           console.log(xhr.responseText);//获取响应的内容 responseText // response 返回响应体     responseText返回响应文本 responseType响应数据类型 
    } 
}
// 3.发送请求 
xhr.send()

GET请求的特点

1.他请求携带内容会在地址栏显示

2.浏览器默认的请求方式为GET

3.携带参数以? 参数名=参数值& 参数名=参数值

POST请求

//1.创建请求对象 
let xhr = createXhr() 
//2.set请求方式以及地址 
xhr.open('POST','http://useker.cn/login') 
//6.设置请求头 key value 俩个都是string类型 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
//模拟 表单提交 
//3.发送请求 send里面 没有? 也是用&拼接 
xhr.send('uname=1&upwd=2') 
//他里面的内容会放在请求体中 
//4.监听 
xhr.onreadystatechange = function(){
     if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
             //5.接收响应 
             console.log(xhr.responseText);
         } 
}

post 请求的特点

1.封装到请求体中

2.如果想使用post 请求必须指定请求方式为 post

3.post请求对应的安全性和携带的内容比 get 要强

4.post请求的效率低于 get 请求 （表单提交使用 post ）