ajax技术

Posted 前端小航

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax技术相关的知识，希望对你有一定的参考价值。

  • AJAX优点

（1）无刷新与服务器通信

（2）可以根据用户点击事件进行局部更新内容。

  • AJAX缺点

（1）存在跨域问题

（2）SEO不友好

（3）没有浏览历史，不能回退请求


  • 原生AJAX

（1）demo代码：

//创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();//设置请求信息xhr.open(method, url)//可以设置请求头，一般不设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//发送请求xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用//接收响应//xhr.responseXML 接收 xml 格式的响应数据//xhr.responseText 接收文本格式的响应数据xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; console.log(text); }}

（2）解决浏览器缓存问题

xhr.open("get","/testAJAX?t="+Date.now());


（3）请求状态

xhr.readyState 可以用来查看请求当前的状态
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

更多：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

  • jQuery发送AJAX

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 发送 AJAX 请求</title> <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body> <div class="container"> <h2 class="page-header">jQuery发送AJAX请求 </h2> <button class="btn btn-primary">GET</button> <button class="btn btn-danger">POST</button> <button class="btn btn-info">通用型方法ajax</button> </div> <script> //GET $('button').eq(0).click(function(){ /* $.get(url, [data], [callback], [type]) url:请求的 URL 地址。 data:请求携带的参数。 callback:载入成功时回调函数。 type:设置返回内容格式，xml, html, script, json, text, _default。 */ $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){ console.log(data); },'json'); }); //POST $('button').eq(1).click(function(){ /* $.post(url, [data], [callback], [type]) url:请求的 URL 地址。 data:请求携带的参数。 callback:载入成功时回调函数。 type:设置返回内容格式，xml, html, script, json, text, _default。 */ $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){ console.log(data); }); });
 //通用写法 $('button').eq(2).click(function(){ //详情：https://jquery.cuishifeng.cn/jQuery.Ajax.html $.ajax({ //url url: 'http://127.0.0.1:8000/jquery-server', //参数 data: {a:100, b:200}, //请求类型 type: 'GET', //响应体结果 dataType: 'json', //成功的回调 success: function(data){ console.log(data); }, //超时时间 timeout: 2000, //失败的回调 error: function(){ console.log('出错啦!!'); }, //头信息 headers: { c:300, d:400 } }); });</script></body></html>

  • axios发送AJAX

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送 AJAX请求</title> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script></head>
<body> <button>GET</button> <button>POST</button> <button>AJAX</button>
 <script> //详情：https://github.com/axios/axios const btns = document.querySelectorAll('button');
 //配置 baseURL axios.defaults.baseURL = 'http://127.0.0.1:8000';
 btns[0].onclick = function () { //GET 请求 axios.get('/axios-server', { //url 参数 params: { id: 100, vip: 7 }, //请求头信息 headers: { name: 'atguigu', age: 20 } }).then(value => { console.log(value); }); }
 btns[1].onclick = function () { //POST 请求 axios.post('/axios-server', { username: 'admin', password: 'admin' }, { //url  params: { id: 200, vip: 9 }, //请求头参数 headers: { height: 180, weight: 180, } }); }  btns[2].onclick = function(){ //通用 axios({ //请求方法 method : 'POST', //url url: '/axios-server', //url参数 params: { vip:10, level:30 }, //头信息 headers: { a:100, b:200 }, //请求体参数 data: { username: 'admin', password: 'admin' } }).then(response=>{ //响应状态码 console.log(response.status); //响应状态字符串 console.log(response.statusText); //响应头信息 console.log(response.headers); //响应体 console.log(response.data); }) }</script></body>
</html>

  • fetch发送AJAX

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch 发送 AJAX请求</title></head><body> <button>AJAX请求</button> <script> //文档地址 //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch  const btn = document.querySelector('button');
 btn.onclick = function(){ fetch('http://127.0.0.1:8000/fetch-server?vip=10', { //请求方法 method: 'POST', //请求头 headers: { name:'atguigu' }, //请求体 body: 'username=admin&password=admin' }).then(response => { // return response.text(); return response.json(); }).then(response=>{ console.log(response); }); }</script></body></html>

  • 解决跨域问题

（1）JSONP---非官方标准

JSONP是什么？

答：JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。


JSONP如何工作？

答：在网页有一些HTML标签天生具有跨域能力，比如：img link iframe script。JSONP 就是利用 script 标签的跨域能力来发送请求的。


JSONP的使用：

//1.动态的创建一个 script 标签var script = document.createElement("script");//2.设置 script 的 src，设置回调函数script.src = "http://localhost:3000/testAJAX?callback=abc";function abc(data) { alert(data.name);};//3.将 script 添加到 body 中document.body.appendChild(script);

服务器端处理（node.js）：

router.get("/testAJAX" , function (req , res) {console.log("收到请求");var callback = req.query.callback;var obj = { name:"孙悟空", age:18} res.send(callback+"("+JSON.stringify(obj)+")");});


jQuery中的JSONP

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">按钮</button> <ul id="list"></ul> <script type="text/javascript" src="./jquery-1.12.3.js"></script> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById('btn') btn.onclick = function() { $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?", function(data) { console.log(data); // 获取所有的电影的条目 var subjects = data.subjects; // 遍历电影条目  for (var i = 0; i < subjects.length; i++) { $("#list").append("<li>" + subjects[i].title + "<br />" + "<img src=\"" + subjects[i].images.large + "\" >" + "</li>"); } }); } }</script> </body></html>


（2）CORS---官方标准

CORS是什么？

答：CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。


CORS如何工作？

答：CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。


CORS的使用：

//主要是服务器端的设置：router.get("/testAJAX" , function (req , res) { //通过 res 来设置响应头，来允许跨域请求 //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); res.set("Access-Control-Allow-Origin","*"); res.send("testAJAX 返回的响应");});

更多：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

以上是关于ajax技术的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段