ajax 01: 基础知识
作者:互联网
ajax概述
- 组成:asynchronous + javascript + xml
- 特点:
- 可发送异步请求(这也是与传统请求方式的区别)
- 用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()
-
-
获取后端响应的数据
-
后端响应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}
- 如何解析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为不支持异步
标签:xml,01,请求,json,基础知识,xhr,ajax,格式 来源: https://www.cnblogs.com/nefu-wangxun/p/16494680.html