Ajax技术

目录

Ajax技术

1.什么是Ajax

2.Ajax中的各项技术

3.基本语法

4.常见请求方式

5.GET/POST请求区别

Ajax技术

[if !supportLists]1. [endif]什么是Ajax

Ajax是一个前端用于异步请求的技术，是一系列技术的结合

Ajax：Asynchronous JavaScript And XML 技术，描述了一种通过JavaS技术完成异步XML格式数据交互的技术。

[if !supportLists]2. [endif]Ajax中的各项技术

XMLHttpRequest：Javascript异步对象

Json数据：json字符串和json对象之间进行切换

DOM渲染：接口返回的数据，我们需要在XML网页中渲染展示

[if !supportLists]3. [endif]基本语法

Ajax异步请求五个步骤：

0．准备：创建异步对象

1．连接服务器：打开和指定接口地址的连接

2．发送请求：通过异步对象发送请求和需要的参数数据

3．后端操作

4．处理响应：获取到接口返回的数据，DOM操作在页面中渲染数据

//1.准备

var http = new XMLHttpRequest()

//2.连接服务器

http.open(‘GET’,’https://www.example.com’)

//3.发送请求

http.send(“city=郑州”)

//4.处理响应数据

http.onreadystatechange = function() {

if(http.readyState === 4 && http.status === 200) {

var txt = http.responseText

}

}

[if !supportLists]4. [endif]常见请求方式

（1）.get：发送请求，一般向服务器请求获取数据，参数拼接在url地址中出现

（2）.post：发送请求，一般向服务器请求新增数据，参数一般包含在请求体中

（3）.put：发送请求，一般向服务器请求更新数据，参数一般包含在请求体中

（4）.delete：发送请求，一般向服务器请求删除数据，参数拼接在url地址中出现

（5）.HEAD ：发送请求，一般向服务器请求响应头数据，经常用来测试响应数据格式

（6）.TRACE ：发送请求，一般给服务器发送心跳请求，测试服务器是否存活

（7）.OPTIONS ：发送请求，一般获取请求和响应配置数据

（8）.CONNECT ：发送请求，一般用于保持长连接进行数据交互

5.GET/POST请求区别

面试题：简述GET 请求和POST 请求区别？

总- GET 请求和POST 请求都是HTTP 规范中定义的请求方式，描述了客户端向服务器发送请求完成后续操作的过程

分- GET 请求在规范中主要用于向服务器请求获取数据，也可以附带字符串参数，参数会拼接在url 地址的后面，参数的长度收到服务器限制；请求效率非常高，浏览器地址栏、超链接、Ajax 都可以发送GET 请求

分- POST 请求在规范中主要用于向服务器新增数据，但是项目开发中我们一般对于给服务器提交比较敏感的数据时，会使用POST 请求将参数包装在请求中进行传递，既可以传送字符串数据，也可以传送二进制数据，如实现文件上传等操作；传递参数的大小受到服务器的限制；请求效率相对GET 没有那么优秀，但是数据安全性得到了一定的保障；一般网页中我们通过表单、Ajax 发送POST 请求

总- 网页中实现页面跳转、请求一些不敏感的数据如搜索，这些都可以通过效率较高的GET 完成数据的请求操作；网页中一些包含敏感数据的操作如登录、注册、转账等建议使用POST 请求完成数据操作