一、定义:AJAX( Asynchronous JavaScript and XML)异步的JavaScript 和 XML。一种用于创建快速动态网页的技术。最初AJAX技术操作的是XML标签,现在绝大多数情况下操作的是JSON格式的字符串。优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
二、JSON格式数据 JSON对象: let obj={" name":"张三",“age”:20,"gender":“男”}(对象的属性名,必须要双引号引起来) JSON数组:let arr=[{"name":"张三",“age”:20,"gender":"男"},{“name”:"李四",“age”:23,"gender":"女"}](对象的属性名需要用引号引起来,属性值为数字时,可以不用双引号,在对象与对象之间用逗号隔开,属性与属性之间也用逗号隔开)
三、AJAX四步骤 1、创建xhr对象(原生ajax对象) let xhr=new XMLHttpRequest() 2、初始化请求(第一个参数是请求方式,第二个参数是请求地址)(请求方式为两个,GET请求和POST请求) xhr.open('GET','./data/koubei.json') (若需要传参数,直接在url后面加) 3、发送请求 xhr.send() 4、监听读取状态改变事件 xhr.onreadystatechange=function( ){if(xhr.readyState==4){if(xhr.status==200){let data=JSON.parse(xhr.responseText)}}}
(注意:当请求方式是POST时,四步骤会稍稍更改,如下: 1、创建xhr对象(原生ajax对象) let xhr=new XMLHttpRequest() 2、初始化请求(第一个参数是请求方式,第二个参数是请求地址)(请求方式为两个,GET请求和POST请求) xhr.open('POST','./data/koubei.json') (添加请求头)xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') application/x-www-form-urlencoded表示参数数据的格式是url格式 可以用 application/json表示参数数据的格式是json格式 替换 3、发送请求 xhr.send()(如果需要传参数,在send里面传参。一般有两种格式url和json url格式:name:张三&age=20&sex=女 ;
json格式:{"name":"三","age":20,"sex":"女"}=> xhr.send(JSON.stringify(对象名))
这边的格式需要和上面的请求头一致!) 4、监听读取状态改变事件 xhr.onreadystatechange=function( ){if(xhr.readyState==4){if(xhr.status==200){let data=JSON.parse(xhr.responseText)}}} )
四、readyState&status
readyState表示读取状态:0=>请求未发送;1=>服务器连接已建立(请求已经发送);2=>请求已接收(服务器已经接收到改请求);3=>请求处理中(服务器正准备你要的数据);4=>请求已完成,且响应已就绪
status表示响应的状态码:200=>成功;404:请求资源错误;500:服务器端错误