AJAX

 一、定义: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:服务器端错误

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容