AJAX学习（一）

2021-03-14

AJAX

（尚硅谷）

摘要：Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。

 

AJAX：异步的js和xml。通过AJAX可以再浏览器中向服务器发送异步请求，无刷新获得数据。
XML：可拓展标记语言，被设计用来传输和存储数据。全部都是自定义标签。
现在已经被JSON取代了

 

AJAX的优点：无需刷新页面与服务器进行通信。
允许根据用户事件来更新部分页面内容。
缺点：没有浏览历史、存在跨域问题、SEO不友好

  • HTTP协议：规定了浏览器与服务器之间互相通信的规则。

  • ##请求（报文）
    重点是格式与参数
    ~~~
    行 POST /URL HTTP/1.1（HTTP版本）
    头 Host：atguigu.com
    Cookie：name=guigu
    User-Agent：chrome 83
    空行
    体 username=admin&password=admin
    （如果是GET请求，请求体可以为空，如果是POST，请求体可以为空）
    ~~~
    ##响应（报文）
    ~~~
    行 HTTP/1.1 200 OK （协议版本、响应状态码、响应状态字符串）（方法、url、协议版本）
    头 （格式和请求头一样）
    Content-Type：text/html；charset=utf-8；

    空行（必须得有）
    体 <html>
    <head>
    </head>
    <body>
    <h>
    </body>
    </html>

    ~~~

  • 谷歌浏览器控制台查看通信报文(F12、network）


  • node.JS：就是一个应用程序，可以解析js代码
    Express：基于node.js平台、极简的的web开发框架

 

VSCODE代码部分

express的基本使用（当作服务器）

 

发送请求

 

 

 

 

 

 

 

 

  •  设置url参数的方法

 

 

 

  •  POST请求

 

 

 

 

 

  •  POST参数设置

  •  

     

  • AJAX设置请求头

  •  

     

  • 服务端响应json，向服务端发送请求，服务端返回结果，大多都是json格式

 

 

 

 

 

 

 nodemon自动重启（修改服务器之后会自动启动）

 

  • AJAX请求超时和网络异常处理

  •  

     

  • AJAX取消请求

     

     

 

posted @ 2021-03-14 13:00  YoungPzz  阅读(34)  评论(0)    收藏  举报