ajax(局部刷新技术)
ajax技术
问题:当用户在地址栏中输入一个网址(url),按下回车到底发生了什么?
笞:当用户在地址栏中输入一个网址按下回车,客户端会向服务器端发起一次上行请求,服务器端接收到请求以后,会响应的做出响应。经过浏览器渲染用户就可以看见了
注意﹔客户端可以问服务器端发起上行请求,常见上行请求有GET、POST上行请求。(起始一共有20多种上行请求)
百度百科解释:
ajax是指一种创建交互式网页应用的网页开发技术。
ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。
总结:ajax是一门前端技术(不是语言),客户端可以‘悄悄的’向服务器端发起上行请求,服务器端可以‘悄悄的’做出相应的下行响应,在页面没有重新加载情况下可以实现页面局部更新。
实例:163邮箱的注册业务,就是使用了ajax技术
ajax技术基本使用
概述:ajax用户可以向服务器端悄悄的发起上行请求,服务器端悄悄地做出相应的下行响应。在页面没有重新加载情况下实现页面局部更新。
注意:前端中ajax技术实现其实是由内置构造函数XMLHttpRequest构造函数实现的。但是在工作中一般都是JQ,因为JQ将原生ajax技术进行封装。
JQ中ajax技术--------GET
1 <!DOCTYPE html>
2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Ajax</title> 6 <!-- 使用JQ --> 7 <script src="./js/jquery-2.1.4.min.js"></script> 8 </head> 9 <body> 10 <h1 class="nav">Ajax</h1> 11 <button id=btn0>点击我(GET)</button> 12 <button id=btn1>点击我(POST)</button>
13 </body> 14 </html> 15 16 <script type="text/javascript"> 17 //给按钮绑定单击事件 18 $("#btn0").click(function(){ 19 // alert(111); 20 //向服务器发起上行请求----GET,拉取服务器数据 21 //第一个参数向服务器端请求path 22 //第二个参数是客户端向服务器端额外传递一些数据(可有可无) 23 //第三个参数,当服务器响应数据成功的时候会立即执行一次 24 $.get( 25 "./data.txt", 26 function(data){ 27 // alert("服务器响应成功"); 28 //修改h1 29 $(".nav").html(data); 30 }); 31 }); 32
JQ当中ajax技术------post
1 //第二个按钮发起post请求 2 $("#btn1").click(function(){ 3 // alert(111); 4 //向服务器发起上行请求----POST,拉取服务器数据 5 $.post( "./data.txt", function(data){ 6 //alert("服务器响应成功2"); 7 //在页面没有重新加载情况下实现页面局部更新 8 $(".nav").html(data); 9 }); 10 });
JQ当中ajax技术------GET、POST
1 //第三个按钮 2 $("#btn2").click(function(){ 3 //向服务器端发起POST请求 4 //当前这个方法可以发起GET、POST,请求参数配置务必是一个JSON数据格式 5 $.ajax({ 6 //请求网址 7 "url":"./data.txt", 8 //请求方式 9 "type":"post", 10 //给服务器传递参数 11 "data":{ 12 "a":10 13 },
//返回数据类型
dataType:"json", 14 //回调函数:可以接收服务器数据 15 "success":function(data){ 16 //当服务器响应的时候会立即执行一次 17 $(".nav").html(data); 18 },"error":function(){ 19 alert("服务器出小差了!!"); 20 } 21 }); 22 });
原生ajax技术
概述:ajax技术原生写法在工作当中不怎么常用,但是面试的时候(前端人)有时候会被问到。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function createXMLHTTPRequest() { 2 //1.创建XMLHttpRequest对象 3 //这是XMLHttpReuquest对象无部使用中最复杂的一步 4 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 5 var xmlHttpRequest; 6 if (window.XMLHttpRequest) { 7 //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 8 xmlHttpRequest = new XMLHttpRequest(); 9 //针对某些特定版本的mozillar浏览器的BUG进行修正 10 if (xmlHttpRequest.overrideMimeType) { 11 xmlHttpRequest.overrideMimeType("text/xml"); 12 } 13 } else if (window.ActiveXObject) { 14 //针对IE6,IE5.5,IE5 15 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 16 //排在前面的版本较新 17 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; 18 for ( var i = 0; i < activexName.length; i++) { 19 try { 20 //取出一个控件名进行创建,如果创建成功就终止循环 21 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 22 xmlHttpRequest = new ActiveXObject(activexName[i]); 23 if(xmlHttpRequest){ 24 break; 25 } 26 } catch (e) { 27 } 28 } 29 } 30 return xmlHttpRequest; 31 }
Get请求代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function get(){ 2 var req = createXMLHTTPRequest(); 3 if(req){ 4 req.open("GET", "http://test.com/?keywords=手机", true); 5 req.onreadystatechange = function(){ 6 if(req.readyState == 4){ 7 if(req.status == 200){ 8 alert("success"); 9 }else{ 10 alert("error"); 11 } 12 } 13 } 14 req.send(null); 15 } 16 }
[
POST代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function post(){ 2 var req = createXMLHTTPRequest(); 3 if(req){ 4 req.open("POST", "http://test.com/", true); 5 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;"); 6 req.send("keywords=手机"); 7 req.onreadystatechange = function(){ 8 if(req.readyState == 4){ 9 if(req.status == 200){ 10 alert("success"); 11 }else{ 12 alert("error"); 13 } 14 } 15 } 16 } 17 }
get和post
相同点:get、post都属于上行请求
不同点:
get | post |
相对而言不安全 | 相对而言安全一些 |
给服务器额外传递数据是有上限的 |
相对而言没有上限 |
便于分享 | 不便于分享 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步