JavaScript ajaxajax - async JavaScript and xml === 异步js和xml

概念

ajax - async JavaScript and xml === 异步js和xml - 异步代码的永远在同步代码后执行。

ajax可以在不刷新页面的情况下，发送http请求，返回数据

发送的数据格式：主要是json格式，xml现在用的不多

异步请求基于上述模式，浏览器把请求交给代理对象 - XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。

                                                  ** 异步请求的执行流程图：**

ajax可同步可异步

发送get请求的步骤

创建对象

var xhr = new XMLHttpRequest()

建立连接

xhr.open('get'，url，是否异步)

监听状态

xhr.onreadystatechange = function(){
    // 在这里可以获取ajax的所有状态 xhr.readyState属性
    // 4是请求完成，200是与后台交互时返回的一个状态码-HTTP状态码
    if (xhr.readyState === 4) {
        if(xhr.status>=200&&xhr.status<300){
            console.log("请求完成");
        // 获取到响应主体
        var res = xhr.responseText
        }
    }
}

发送请求

xhr.send()

post请求

创建ajax请求对象 - 0

var xhr = new XMLHttpRequest()

建立一个ajax链接：xhr.open(请求方式，url，是否异步) 1 建立了还没发送

// ajax可同步可异步，默认异步
xhr.open("post",'demo.php',true)
// 如果是同步ajax会给出警告-建议使用异步操作，因为同步就是按顺序执行，先发送请求，当监听状态的时候，就已经发送成功了 
- 建议在写ajax时，先监听状态，再发送请求

监听ajax状态 3数据接收中，4请求完成

xhr.onreadystatechange = function(){
    // 在这里可以获取ajax的所有状态 xhr.readyState属性-4表示请求完成
    if (xhr.readyState === 4) {
        if(xhr.status>=200&&xhr.status<300){
            console.log("请求完成");
        // 获取到响应主体
        var res = xhr.responseText
        }
    }
}

post请求需要先设置数据格式 - 请求头 - 模拟表单提交

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

发送这个请求，xhr.send(传送请求主体)2 发送这个请求

xhr.send("pid="+pid&"name="+name)

常见响应状态码 - xhr.status

200交易成功

302临时移动，客户端应使用原url

303永久移动，返回信息包括新的url和请求方式（get/post）

304服务器接收到请求，但请求的资源未发生修改，数据从浏览器缓存中读取

401要求用户进行身份认证

403服务器理解客户端请求，但拒绝此请求

404服务器无法根据客户端请求找到资源

500服务器内部错误，无法完成请求

502作为网关与代理服务器尝试执行请求时，从远程服务器接受到了一个无效的响应

503服务器过载或维护

ajax优点

不需要插件支持 - 支持js
不刷新页面，用户体验好
提升web性能，异步发送http请求，只需发送部分数据 - 减轻浏览器负担缺点：
不能后退
对搜索引擎支持不太友好，搜索爬虫爬不到 - 没有标签

错误处理语法

try{ //尝试运行，如果运行成功了，后面的catch就不运行了
    要执行的代码段
}catch(err){   //catch捕获 - 捕获执行失败的错误  -  错误信息就是参数err
    // catch可以运行失败之后的代码
    代码段
}

这个结构通常是做兼容处理

事件监听器 - 兼容写法

 try{
    btn.addEventListener('click',function(){
        console.log(123)
    })
}catch(err){
    //自己处理错误，避免js中报错就会终止代码
    btn.addachEvent('onclick',function(){
        console.log('错误信息'+err)
    })
}