ajax 01: 基础知识()

ajax概述

  • 组成:asynchronous + javascript + xml
  • 特点:

    可发送异步请求(这也是与传统请求方式的区别)
    用javascript语言编写代码
    前后端数据交换格式为xml(不局限于xml:例如现在更为常用的json,还有其它格式,例如:普通字符串)

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

ajax请求核心对象

  • 核心对象:XMLHttpRequest
  • 发送ajax请求流程的代码

    发送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+””)

    发送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()

  • 发送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+””)

  • 发送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()

  • 获取后端响应的数据

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

    后端响应xml格式的数据
    response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

    var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

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

  • 后端响应xml格式的数据
    response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

    var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

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

  • ajax get请求有缓存的原因?
  • 哪些浏览器会发生ajax get请求的缓存问题?
  • 如何解决ajax get请求的缓存问题?

    提交请求时带上一个时间戳

  • 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

  • json数据格式的格式规范

    {“xxx” : xxx}

  • {“xxx” : xxx}
  • 如何解析json格式的数据
  • 利用fastjson快速生成json格式的字符串

基于XML的数据交换

  • xml数据格式的格式规范
  • 如何解析xml格式的数据

两种数据交换格式的对比

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

ajax乱码问题

  • 解决方法
    request.setCharacterEncoding(“utf-8”);
    response.setContentType(“text/html;charset=utf-8”);

ajax异步与同步

  • 特点:类似多线程并发
  • 设置:
    xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true) //true为支持异步,false为不支持异步

————————

ajax概述

  • 组成:asynchronous + javascript + xml
  • 特点:

    可发送异步请求(这也是与传统请求方式的区别)
    用javascript语言编写代码
    前后端数据交换格式为xml(不局限于xml:例如现在更为常用的json,还有其它格式,例如:普通字符串)

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

ajax请求核心对象

  • 核心对象:XMLHttpRequest
  • 发送ajax请求流程的代码

    发送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+””)

    发送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()

  • 发送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+””)

  • 发送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()

  • 获取后端响应的数据

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

    后端响应xml格式的数据
    response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

    var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

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

  • 后端响应xml格式的数据
    response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

    var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

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

  • ajax get请求有缓存的原因?
  • 哪些浏览器会发生ajax get请求的缓存问题?
  • 如何解决ajax get请求的缓存问题?

    提交请求时带上一个时间戳

  • 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

  • json数据格式的格式规范

    {“xxx” : xxx}

  • {“xxx” : xxx}
  • 如何解析json格式的数据
  • 利用fastjson快速生成json格式的字符串

基于XML的数据交换

  • xml数据格式的格式规范
  • 如何解析xml格式的数据

两种数据交换格式的对比

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

ajax乱码问题

  • 解决方法
    request.setCharacterEncoding(“utf-8”);
    response.setContentType(“text/html;charset=utf-8”);

ajax异步与同步

  • 特点:类似多线程并发
  • 设置:
    xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true) //true为支持异步,false为不支持异步