AJAX

用 JS 实现页面的局部更新

简介

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法

  • AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

AJAX工作原理

AJAX工作原理图

请求方法

方法(参数) 描述
axios.request(config) 未指名的请求(请求方法在 config 中指定)
axios.get(url[, config]) 索取数据(一般只向服务器发送简单的数据)
axios.delete(url[, config]) 删除某一个资源(一般很少用到)
axios.head(url[, config]) 判断资源是否存在(HEAD不含有呈现数据,而仅仅是HTTP头信息)
axios.post(url[, data[, config]]) 提交数据(发送用户输入,不是采用7位的ASCII编码数据,URL过长)
axios.put(url[, data[, config]]) 更新请求(一般需要一个完整的 UserInfo)
axios.patch(url[, data[, config]]) 局部更新(表示该请求是一个局部更新,后端仅更新接收到的字段)

XMLHttpRequest对象

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

创建XMLHttpRequest对象的语法

  1. var xml = new XMLHttpRequest()

请求

向服务器发送请求

  1. xml.open('method','url',async);
  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

将请求发送到服务器

  1. xml.send(string)

string:仅用于 POST 请求

:发送一个GET请求

  1. var xml = new XMLHttpRequest()
  2. xml.open('GET','https://api.github.com/users/l552177239',true)
  3. xml.send()

向一个POST请求添加请求头

如果需要像 HTML 表单那样 POST 数据,请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据。

  1. setRequestHeader(header,value)
  • header: 规定头的名称
  • value: 规定头的值

:通过access token,发送一个登陆的POST请求,

  1. xml.open('POST','https://cnodejs.org/api/v1/accesstoken',true);
  2. xml.setRequestHeader("Content-type","application/json");
  3. let date = {
  4. accesstoken:'3f77acb1-d753-4393-b784-44913190e6a8'
  5. }
  6. xml.send(JSON.stringify(date))

响应

服务器响应

如需获得来自服务器的响应,请使用XMLHttpRequest对象的responseTextresponseXML属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

将服务器返回的数据转换为字符串

  1. var text = JSON.parse(xml.responseText)

onreadystatechange事件

XMLHttpRequest 对象的三个重要的属性

属性 描述
onreadystatechange 存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 - 0: 请求未初始化 - 1: 服务器连接已建立 - 2: 请求已接收 - 3: 请求处理中 - 4: 请求已完成,且响应已就绪
status 200: “OK”404: 未找到页面

onreadystatechange

onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于 4 且状态为 200 时,表示响应已就绪:

  1. xml.onreadystatechange=function()
  2. {
  3. if (xml.readyState==4 && xml.status==200)
  4. {
  5. document.getElementById("myDiv").innerHTML=xml.responseText;
  6. }
  7. }

:在 HTML 内渲染帐号的id和服务器返回的 JSON 数据

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <div id="q">
  8. </div>
  9. <p id='l'></p>
  10. <script>
  11. var xml = new XMLHttpRequest();
  12. xml.onreadystatechange=function(){
  13. if (xml.readyState===4 && xml.status===200){
  14. console.log('json',xml.responseText)
  15. let date = JSON.parse(xml.responseText)
  16. q.innerText =date.id
  17. document.getElementById("l").innerText=xml.responseText;
  18. }
  19. }
  20. xml.open('POST','https://cnodejs.org/api/v1/accesstoken',true);
  21. xml.setRequestHeader("Content-type","application/json");
  22. let date = {
  23. accesstoken:'3f77acb1-d753-4393-b784-44913190e6a8'
  24. }
  25. xml.send(JSON.stringify(date))
  26. </script>
  27. </body>
  28. </html>

利用组件发AJAX请求

JQ的ajax方法

  1. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  2. <script>
  3. $.ajax({
  4. url:'https://api.github.com/users/l552177239',
  5. success:function(data,state,XHR){
  6. console.log(data,state,XHR)
  7. },
  8. error:function(data,state,XHR){
  9. console.log(data,state,XHR)
  10. }
  11. })
  12. </script>

:搜索账号

  1. <body>
  2. <div class="wrap">
  3. <input type="text" id='username' placeholder="请输入帐号" />
  4. <input type="button" id='search' value="搜索" />
  5. <p id='playground'></p>
  6. </div>
  7. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $('#search').click(function(){
  10. var username = $('#username').val()
  11. $.ajax({
  12. url:'https://api.github.com/users/'+username,
  13. success:function(data,state,XHR){
  14. //console.log(data,state,XHR)
  15. var str = ''
  16. str += `<h3>用户名:${data.login}</h3><img src="${data.avatar_url}" alt="头像" /><p>最近更新时间:${data.updated_at}</p>`
  17. $('#playground').html(str)
  18. },
  19. error:function(data,state,XHR){
  20. alert('很抱歉,搜索失败,错误为:'+error)
  21. }
  22. })
  23. })
  24. </script>
  25. </body>

ES6的Promise方法

  1. <script>
  2. var test = new Promise( function(resolve, reject){
  3. console.log('执行中')
  4. setTimeout(function(){
  5. console.log('完成')
  6. resolve()
  7. },5000)
  8. }).then(function(){
  9. console.log('真慢')
  10. }).catch(function(){
  11. console.log('完不成了')
  12. })
  13. </script>

Window新增的fetch方法

  1. <script>
  2. fetch('https://api.github.com/users/l552177239')
  3. .then(function(data){
  4. return data.json()
  5. }).then(function(json){
  6. console.log(json)
  7. }).catch(function(err){
  8. console.log(err)
  9. })
  10. </script>

axios库

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. axios.get('https://api.github.com/users/l552177239')
  4. .then(function (response) {
  5. console.log(response.data);
  6. })
  7. .catch(function (error) {
  8. console.log(error);
  9. })
  10. </script>

参考