ajax请求对象完整版

完成一个完整的思维导图 是一种不错的感受，如有异议欢迎指正，感谢

ajax请求对象

• ajax介绍
  • ajax的概念
    • Ajax是一种用于创建快速 动态网页 的技术 这种技术 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序
  • 异步请求
    • 页面上DOM的操作 和 请求服务器端的操作 互相之间不会造成阻塞
  • 同步请求
    • 请求服务器端的操作和 页面上DOM的操作 互相之间会造成阻塞 数据未请求完成 就不可页面操作
  • ajax异步通信原理
    • 通过javaScript 中的XMLHttprequest 对象 ；实现在不需要刷新页面的情况下 ，与服务器保持通信和联系 ；页面可以不用重新加载页面的数据继续让用户操作
    • 原理：根据需求通过网页中DOM事件的触发 与服务器进行通信 请求所需要更新的数据；通过DOM节点操作 实现页面的局部更新； 而不是重复请求网页所有的数据；数据未完成请求时 页面不阻碍用户继续操作
• ajax的核心对象
  • new XMLHttpRequest() http请求对象 浏览器内置对象”XMLHttpRequest”
    • 属性
      • xhr.readyState 保存 请求状态码
        • 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
        • 1 (初始化) 对象已建立，尚未调用send方法
        • 2 (发送数据) send方法已调用,但是当前的状态及http头未知
        • 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
        • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
      • xhr.status 服务器的响应状态码
        • 200 ok
        • 304
        • 404 not found
        • 403
        • 501 服务器错误
        • 505
      • xhr.statusText 服务器的响应状态文本信息
      • xhr.responseText 请求的结果文本内容 数据
      • xhr.responseXML 请求到的xml格式数据
      • xhr.onreadystatechange 用于绑定请求状态变化事件
    • 方法
      • xhr.open(method,url,async)
        • method 请求的方式
          • get
            • 特征
              • GET请求允许被缓存
              • GET 请求保留在浏览器历史记录中
              • GET 请求有长度限制
              • GET 请求只应当用于取回数据
              • GET 请求可被收藏为书签
              • GET 请求不应在处理敏感数据时使用(如密码登陆)
          • post
            • 特征
              • POST方法没有缓存问题
              • POST方法是把提交的数据传到xhr.send(提交的数据)中
              • POST方法提交的数据没有限制
              • POST方式 提交数据是在浏览器内部 相对较安全
        • url 请求地址
          • get方式 键值对拼接传递参数
            • http://www.dome.com?键=值&key=val
          • get请求方式的中文乱码问题
            • http://www.dome.com?key= enCodeURI("张三")
        • async 布尔值 同步、异步
          • true 异步请求
          • false 同步请求
      • xhr.send()
        • get方式 不需要传参数
        • post方式 需要传参数
          • xhr.send( "key=val&keys=value" )
      • xhr.setRequestHeader() 当post方式时 需要设置请求头
        • xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
• ajax请求步骤
  • (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    • var xhr = new XMLHttpRequest( )
  • (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. open()
    • xhr.open("get","url",true)
  • (3)监控响应HTTP请求状态变化的函数.
    • xhr.onreadystatechange = function(){ }
  • (4)发送HTTP请求. send()
    • xhr.send( )
  • (5)获取异步调用返回的数据. responseText
    • 监听请求状态的变化 当xhr.readyState==4 并且 xhr.status==200 请求的结果为 xhr.responseText / xhr.responseXML 文本格式或者XML 一般为 JSON字符串
  • (6)使用JavaScript和DOM实现局部刷新.
    • 对请求到数据进行遍历 对DOM节点进行 增加 删除 修改 等操作 从而实现局部刷新
• get封装
  • get( { url:"" , data:"" , success:function(){ } } )
• post封装
  • post({ url:"",data:"", success:function(){ } })
• ajax封装
  • ajax( { type:"get", url:"" , data:"" , success: function(){ } } )
• JSON格式的使用
  • json格式的字符串 转换为 js结构的对象
    • JSON.parse( json )
  • js结构的对象 转换为 json格式的字符串
    • JSON.stringify( obj )
  • JSON格式的作用
    • JSON是可以传输的，因为它是文本格式，但是JS对象是没办法传输的，在语法上，JSON也会更加严格，前端和后端可以通过JSON格式 进行数据传输