文章目录
1.什么是Ajax
Ajax 是一个前端用于异步请求的技术，是一系列技术的结合
Ajax ： Asynchronous JavaScript And XML 技术，描述了一种通过JavaScript 技术完成异步 XML 格式数据交互的技术，主要通过JavaScript XMLHttpRueset 异步对象完成 XML 格式文件的处理；早期的Ajax 就是异步交互 XML 格式的数据的，后来通过 JSON 格式的数据替代了 XML 格式；但是 Ajax 名称依然沿用！
2.Ajax中的各项技术
- XMLHttpRequest ： JavaScript 异步对象
- json 数据： json 字符串和 json 对象之间进行切换 stringify() / parse()
- DOM 渲染：接口返回的数据，我们需要在 HTML 网页中渲染展示
2-1基本语法
Ajax 作为一个异步请求，包含了5个步骤：
1.准备(创建对象)、
2.连接服务器、
3.发送请求、
4.处理请求、
5.处理响应- 0准备：创建异步对象，前端操作
- 1连接服务器：打开和指定接口地址的连接、前端操作
- 2发送请求：通过异步对象发送请求和需要的参数数据，前端操作
- 3处理请求：后端操作
- 4处理响应：获取到接口返回的数据， DOM 操作在页面中渲染数据，前端操作
代码固定格式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 1、准备 var http = new XMLHttpRequest() // 2、连接服务器 http.open('GET', 'https://www.example.com') // 3、发送请求、参数 http.send("city=郑州") // 4、处理响应数据 http.onreadystatechange = function(){ // 保障当前是最后一个阶段，并且接口正确返回了数据 // readState : 0 / 1 / 2 / 3 / 4(接口返回数据) // status: 服务状态码，2xx开头表示正确；3xx开头表示重定向；4xx开头表示 请求错误；5xx开头表示服务器内部操作 if(http.readyState === 4 && http.status === 200){ // 获取服务器返回的数据 var txt = http.responseText // 固定语法，获取返回的文本数据 // DOM操作处理数据 } } </script> </body> </html>代码操作示例 获取天气预报<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="box"> <input type="text" name="city" id="city" /> <button id="get-weather">获取天气信息</button> <ul> <li id="weather"></li> </ul> </div> <script> //获取标签 var _city = document.querySelector("#city"); //querySelector 查询全部选择器 var _btn = document.querySelector("#get-weather"); var _li = document.querySelector("#weather"); //添加事件 _btn.onclick = function () { //获取城市名称，并判断城市名称不能为空 var _cityName = _city.value; if (_cityName.trim() === "") { alert("城市名称不能为空"); return; } console.log(_cityName); //Ajax操作 //1.创建对象 var http = new XMLHttpRequest(); //2.连接服务器 http.open( "GET", "https://v0.yiketianqi.com/api? unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&city=" + _cityName ); //3.发送请求 http.send(); //4.处理响应数据 http.onreadystatechange = function () { if (http.readyState === 4 && http.status === 200) { //获取天气数据 var txt = http.responseText; //转换成JAON对象 var obj = JSON.parse(txt); console.log(obj, "获取到的天气信息"); //DOM操作 _li.innerText = obj.data[0].narrative; } }; }; </script> </body> </html>网页结果如下 
3.常见请求方式
HTTP1.1规范 中，将浏览器客户端跟服务器之间的请求，区分8种请求方式：
- GET ：发送请求，一般向服务器请求获取数据，参数拼接在 url 地址中出 现【熟练】
- POST ：发送请求，一般向服务器请求新增数据，参数一般包含在请求体中 【熟练】
- PUT ：发送请求，一般向服务器请求更新数据，参数一般包含在请求体中 【熟悉】
- DELETE ：发送请求，一般向服务器请求删除数据，参数拼接在 url 地址 中出现【熟悉】
补充1.关于一个请求的格式 浏览器客户端发送的请求，就是发送了一个 url 地址；浏览器底层其实将
用户发送的 url 地址以及浏览器本身的一些信息包装成了一个请求对象进行发
送，主要包含：- 请求地址： url 地址， https://www.example.com
- 请求方式：操作数据的方式， GET/POST..
- 请求头：请求的格式数据
- 请求体：包装请求的对象
补充2： GET/POST 请求的区别 (重点) 3-1.面试题 ：简述 GET 请求和 POST 请求区别？
总- GET 请求和 POST 请求都是 HTTP 规范中定义的请求方式，描述了客户 端向服务器发送请求完成后续操作的过程 分- GET 请求在规范中主要用于向服务器请求获取数据，也可以附带字符 串参数，参数会拼接在 url 地址的后面，参数的长度收到服务器限制；请求效 率非常高，浏览器地址栏、超链接、 Ajax 都可以发送 GET 请求 分- POST 请求在规范中主要用于向服务器新增数据，但是项目开发中我们 一般对于给服务器提交比较敏感的数据时，会使用 POST 请求将参数包装在 请求中进行传递，既可以传送字符串数据，也可以传送二进制数据，如实现 文件上传等操作；传 递参数的大小受到服务器的限制；请求效率相对 GET 没有那么优秀，但是数据安全性得到了一定的保障；一般网页中我们通过表单、 Ajax 发 送 POST 请求 总- 网页中实现页面跳转、请求一些不敏感的数据如搜索，这些都可以通过 效率较高的 GET 完成数据的请求操作；网页中一些包含敏感数据的操作如登 录、注册、转账等建议使用 POST 请求完成数据操作4.GET/POST 请求
JavaScript Ajax 可以操作 HTTP 规范中的各种请求方式，常用的 GET/POST 请 求
4-1 get请求
<script> // 1、创建对象 var _http = new XMLHttpRequest() // 2、打开服务器连接 // 附带参数：参数拼接格式一定要正确,?name=tom&age=20&gender=1 _http.open('GET', 'http://www.example.com?name=tom&age=20&gender=1') // 3、发送请求 _http.send() // 4、处理返回数据 _http.onreadystatechange = function() { // 判断数据正确返回 if(_http.readyState === 4 && _http.status === 200) { // 获取服务器接口数据 var _txt = _http.responseText // DOM操作数据 //... } } </script>4-2 post请求
<script> // 1、创建对象 var _http = new XMLHttpRequest() // 2、打开服务器连接 _http.open('POST', 'https://www.example.com') // 3、设置请求头 _http.setRequestHeader('content-type', 'application/x-www-form- urlencoded') // 4、发送请求 // 附带参数，以字符串的方式添加参数 _http.send('username=admin&userpass=123') // 5、处理响应 _http.onreadystatechange = function() { // 判断数据是否正确返回 if(_http.readyState === 4 && _http.status === 200) { // 获取返回的数据 var _txt = _http.responseText // DOM操作 } } </script>快递案例开发 API 失效<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>快速单号查询</title> <style> #get-Courier { width: 100px; height: 40px; background-color: blueviolet; border: none; color: white; cursor: pointer; margin: auto; } #no { width: 400px; height: 38px; margin: auto; } </style> </head> <body> <div id="box"> <input type="text" name="no" id="no" /> <button id="get-Courier">获取快递信息</button> <ul id="history"> <!-- <li id="Courier"> <span class="time"></span> <span>物流信息</span> </li> --> </ul> </div> <script> var _no = document.querySelector("#no"); var _btn = document.querySelector("button"); var _his = document.querySelector("#history"); _btn.onclick = function () { _his.innerText = ""; var _value = _no.value; if (_value.trim() === "") { alert("快递单号不能为空"); return; } //Ajax操作 //1.创建对象 var _http = new XMLHttpRequest(); //连接服务器 _http.open( "post", "https://route.showapi.com/64-19?showapi_appid=1145638&showapi_sign=7dee11273714485b9a2625dc4c6443cb&com=auto &nu= " + _value ); //发送请求 _http.send(); //4.处理响应数据 _http.onreadystatechange = function () { if (_http.readyState === 4 && _http.status === 200) { //获取返回的数据 var _txt = _http.responseText; //转换成JSON 对象 var _obj = JSON.parse(_txt); console.log(_obj, "获取到的快递信息"); //DOM渲染 var _data = _obj.showapi_res_body.data; for (var i = 0; i < _data.length; i++) { var _span = document.createElement("span"); _span.className = "time"; _span.innerText = _data[i].time; //显示快递数据 var _span2 = document.createElement("span"); _span2.innerText = _data[i].context; //创建li标签 ，包含两个span var _li = document.createElement("li"); _li.appendChild(_span); _li.appendChild(_span2); //将li标签，添加到页面中 _his.appendChild(_li); } } }; }; </script> </body> </html>网页效果如下
扫一扫
1797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
