ajax创建
内置对象 请求对象 在请求的过程中 监听请求状态 请求成功后从而获得响应 响应里面在读取到数据
get请求
1请求携带内容会在地址栏显示
2.浏览器默认的请求方式
3.携带参数以?参数&参数&…
//创建一个请求对象
let xhr = new XMLHttpRequest()
//设置请求地址
xhr.open('get',"https://jsonplaceholder.typicode.com/todos")
//发送请求
xhr.send()
//监听请求状态
xhr.onreadystatechange = function(){
//请求完成后,读取响应的数据
//判断是否成功了
//状态码 1 表示已经成功还需要继续操作 2 已经完成 3 重定向页面 4 客户端错误(404,找不到) 5服务器错误
//readyState值 0未初始化 1 启动 2 接受请求未响应 3 部分完成 4 完成
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
console.log(xhr.responseText);//获取响应的内容
// response 响应主体 responseType 响应数据类型
}
}
post请求
1封装到请求体中
2.如果想使用post请求必须指定请求方式为post
3.post请求对应的安全性和携带的内容比get强
4.post请求效率低于get请求(表单提交使用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);
}
}
XMLHttpRequest(有兼容问题)
封装方法
//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
封装ajax
抽取共同的内容作为公共代码块(不同的内容做参数)
封装ajax的不同点
请求方式 请求地址 回调函数 参数不一样 是否异步 参数类型不一样
ajax({
method: 请求方式
url: 请求地址
aync: 是否异步 ture 默认为以异步
data: 请求参数
dataType: 响应的参数类型 object 默认要做json.parse操作
callback: 回调
})
ajax封装
为了解决回调地狱的问题,es6增加了一个promise对象
//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//options是一个对象
//先准备默认的对象 存储默认
let defaultObj = {
method:'GET', //默认为get请求
url:'', //必填
aync: true, //默认为异步请求
data: '',
dataType: 'json' //默认响应数据类型为json 默认需要JSON.parse
}
//url地址没有传递或者传递是空值 直接出去
if(!options.url || options.url==''){
throw new Error('url地址必须不为空') //抛出一个错误
}
//取出传递options里面的数据 给到defaultObj
for(let key in options){
defaultObj[key] = options[key] //将对应的key进行赋值
}
//后面使用的就是defaultObj
//判断method是否是get或者post 其他形式报错 全部大写
if(defaultObj.method.toUpperCase() != "GET" && defaultObj.method.toUpperCase() != "POST"){
throw new Error('请求方式错误') //抛出一个错误
}
//判断aync是否为boolean类型
if(!typeof defaultObj.aync == "Boolean"){
throw new Error('aync必须是boolean类型') //抛出一个错误
}
//对于data的类型做一个判断 如果是string类型直接拼接 如果是对象类型 需要转为对应的string
if(defaultObj.data.toString() == "[object Object]"){ //如果你是string类型调用toString方法会直接返回对应内容
let dataStr = ""
for(let key in defaultObj.data){
dataStr+=key+'='+defaultObj.data[key]+"&"
}
//截图到最后一个&符号(把最后一个字符剔除)
dataStr = dataStr.slice(0,-1)
defaultObj.data = dataStr
}
//如果你是get请求 那么对应的请求数据和请求地址应该拼接
if(defaultObj.method.toUpperCase() == "GET"){
defaultObj.url+="?"+defaultObj.data
}
//创建一个请求对象
let xhr = createXhr()
//open请求地址
xhr.open(defaultObj.method.toUpperCase(),defaultObj.url)
//send发送请求
if(defaultObj.method.toUpperCase() == "POST"){
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(defaultObj.data)
}else{
xhr.send()
}
//监听请求
return new Promise((success,error)=>{
xhr.onreadystatechange = function(){
//接收响应
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
let res
if(defaultObj.dataType == "json"){
res = JSON.parse(xhr.responseText)//转换为json对象
}else{
res = xhr.responseText
}
success(res)
}
//服务器的响应 状态码
if(!/^20\d$/.test(xhr.status)){
error(xhr.status)
}
}
})
}
回调地狱
无限的在回调函数里面进行回调函数的调用
代码可维护性低,代码可阅读性低,执行效率低
为了解决回调地狱的问题,es6增加了一个promise对象
将异步的代码块变为同步代码块
成功resolve(解决) 失败reject(拒绝)
<!-- 引用外部js-->
<script src="./Ajax.js"></script>
<script>
//无限的在回调函数里面进行回调函数的调用
//代码可维护性低,代码可阅读性低,执行效率低
//为了解决回调地狱的问题,es6增加了一个promise对象
//将异步的代码块变为同步代码块
//成功resolve(解决) 失败reject(拒绝)
let promise = new Promise((resolve,reject)=>{
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback:function(res){
console.log(res);
resolve(res)//传递给对应的.then的参数
}
})
})
promise.then((res)=>{ //这个res参数值就是调用上面的resolve传过来的
console.log(res);
})
promise.catch((error)=>{//reject里面传过来的
console.log(error);
})
</script>