关于Ajax

张宏都
146 阅读4分钟

  1. 是一种用于创建快速动态网页的技术

  2. 可以使网页实现异步更新，无需加载整个页面，对某部分进行更新

  3. 优点：

    1. 页面无需刷新
    2. 异步通讯，更快的响应能力

  4. 缺点

    1. 不能后退
    2. 不能用url访问
    3. 存在安全问题
    4. 破坏程序的异常机制

  5. ajax的特点

    • 可以实现动态不刷新，也就是局部刷新。具体就是在不更新整个页面的前提下维护数据。这使得web应用程序更为迅速的回应用户动作，并避免了在网络上发送那些没有改变过的信息

  6. 原生JS中ajax请求有几个步骤？

    1. 创建xmlHttpRequest对象
     var xhr = new XmlHttpRequest
    1. 规定请求的类型，url以及是否异步处理
     xhr.open('get',url,true)
    1. 设置请求头
     xhr.setRequestHeader(header,value)
    • get请求不用设置，post需要设置
    • header：一般设置'content-Type'，传输数据类型
    • value： 具体的数据类型，常用'application/x-www-form-urlencoded'和'application/json'
    1. 发送请求
     xhr.send(null)
    • 括号内是xhr请求中要发送的请求体，根据请求头中的类型传参，如果是get请求，可以传null或不传参
    1. 指定xhr状态变化事件处理函数
     xhr.onreadyStatechange = function(){
     if(this.readyState === 2){
         //接收到响应体
         console.log('接收成功！',xhr.readyState)
     }else if(this.readyState === 3){
         //响应体加载中
         console.log('loading！',xhr.readyState)
     }else if(this.readyState === 4){
         //加载完成
         console.log('加载完成！',xhr.readyState)
     }
 }
    • 一般都是在readyState为4时，执行响应的后续逻辑
    • readyState属性
      • 0:UNSENT，表示代理xhr被创建，当尚未调用open方法
      • 1：OPENED，表示open方法以及被调用，建立了连接
      • 2：HEADERS_RECEIVED，表示send方法已经被调用，并且已经可以获取状态行和响应头
      • 3：LOADING，表示响应体下载中，responseText属性可能已经包含部分数据
      • 4：表示响应体下载完成，可以直接使用responseText
  • 注意：
    1. 设置请求头setRequestheader必须在open()和send()之间
    2. get方法不用设置请求头，send()中不用设置请求体，传null或不传即可
    3. open()方法第三个参数要求传入一个布尔值，其作用就是设置此次请求是否采用异步方式执行，默认为true，即异步方式。如果需要同步执行可以传false，此时，代码会卡在send()，等到所有数据都传输完成，才会往下执行
  • 问题
    • 同步执行的时候，onreadyStatechange事件不会触发
      • 因为onreadyStatechange事件只有在readyState变化时才触发。同步执行的时候，全部数据传输完了，readyState将不会再变化，此时注册onreadyStatechange事件，也不会再被触发
      • 解决方法
        • 因为同步执行会卡在send()，等数据传输完才执行下一步，所以可以再发请求send()之前，先注册onreadyStatechange事件
  1. 响应式数据格式
    • XML（已淘汰）

      • 淘汰原因；

        • 数据冗余太多。用来描述数据的数据占用数据量比较大，不利于大量数据的网络传输
        • js解析方法比较复杂，不方便使用
        • xml代码
        <booklist>
    <book>
        <name>
            xxx
        <name/>
        <auth>
            yyy
        <auth/>
    <book/>
<booklist/>
    • JSON（一种轻量级的数据交换格式）

      • 全称： JavaScript Object Notaion 对象表示法

      • 数据描述手段，类似js字面量方式

        • 与对象字面量的区别
          1. JSON不需要存储在变量里
          2. 结束时不需要写分号
          3. 属性名需要加引号
        //对象字面量
    var obj = {
        name:'xxx',
        age:14
    };
//JSON
    {
        "name":'xxx',
        age:'12'
    }
  2. ES5新增JSON对象
    • JSON.parse()
      • 参数：字符串（符合JSON格式）
      • 返回值：转换成一个对象
    • JSON.stringify()
      • 参数：对象
      • 返回值：字符串（符合JSON格式）
  3. http创建的状态码
    • 2开头（表示成功处理请求）
      • 200:表示服务器已经成功处理了请求
    • 3开头（表示要完成请求，需要进一步操作，通常用来重定向）
      • 304:自从上次请求后，网页未修改过，服务器不会返回网页内容
    • 4开头（表示请求可能出错，妨碍了服务器的处理）
      • 400：错误请求，服务器不理解请求的语法
      • 403：服务器拒绝请求
      • 404：服务器找不到请求的网页
    • 5开头（表示服务器错误）
      • 建议找后端打一架
avatar
文章
阅读
粉丝