ajax 01: 基础知识

2年前 (2022) 程序员胖胖胖虎阿
159 0 0

ajax概述

  1. 组成:asynchronous + javascript + xml
  2. 特点:
    1. 可发送异步请求(这也是与传统请求方式的区别)
    2. 用javascript语言编写代码
    3. 前后端数据交换格式为xml(不局限于xml:例如现在更为常用的json,还有其它格式,例如:普通字符串)
  3. ajax请求的应用场景:需要发送异步请求或者要局部刷新页面

ajax请求核心对象

  1. 核心对象:XMLHttpRequest

  2. 发送ajax请求流程的代码

    1. 发送ajax post请求

      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
          if(this.readyState == 4){
      	    if(this.status == 200){
      		    //执行代码
      	    }else{
      		//执行代码
      	    }
          }
      }
      xhr.open("POST", "/ajax/ajaxRequest4", true)
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
      xhr.send("username="+username.value+"")
      
    2. 发送ajax get请求

      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
          if(this.readyState == 4){
      	    if(this.status == 200){
      		    //执行代码
      	    }else{
      		//执行代码
      	    }
          }
      }
      xhr.open("GET", "/ajax/ajaxRequest4?" + "username="+username+"", true)
      xhr.send()
      
  3. 获取后端响应的数据

    1. 后端响应json格式的数据

      var jsonObj = JSON.parse(xhr.responseText)
      
    2. 后端响应xml格式的数据

      response.setContentType("html/xml;charset=utf-8")	//后端要设置响应数据的类型
      
      var xmlObj = xhr.responseXML	//前端按照xml格式进行数据解析
      

ajax发送get请求时的缓存问题

  1. ajax get请求有缓存的原因?
  2. 哪些浏览器会发生ajax get请求的缓存问题?
  3. 如何解决ajax get请求的缓存问题?
    1. 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

  1. json数据格式的格式规范
    1. {"xxx" : xxx}
  2. 如何解析json格式的数据
  3. 利用fastjson快速生成json格式的字符串

基于XML的数据交换

  1. xml数据格式的格式规范
  2. 如何解析xml格式的数据

两种数据交换格式的对比

  1. json特点:轻量,易解析
  2. xml特点 :体积大,解析较繁琐,但是格式严谨,更安全

ajax乱码问题

  1. 解决方法

     request.setCharacterEncoding("utf-8");
     response.setContentType("text/html;charset=utf-8");
    

ajax异步与同步

  1. 特点:类似多线程并发

  2. 设置:

    xhr.open("GET", "/ajax/ajaxRequest4?" + "username="+username+"", true)	//true为支持异步,false为不支持异步
    
版权声明:程序员胖胖胖虎阿 发表于 2022年11月12日 上午2:00。
转载请注明:ajax 01: 基础知识 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...