ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ajax 01: 基础知识

2022-08-05 09:00:09  阅读:185  来源: 互联网

标签:xml 01 请求 json 基础知识 xhr ajax 格式


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为不支持异步
    

标签:xml,01,请求,json,基础知识,xhr,ajax,格式
来源: https://www.cnblogs.com/nefu-wangxun/p/16494680.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有