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技术原生写法在工作当中不怎么常用，但是面试的时候（前端人）有时候会被问到。
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请求代码
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代码
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 |
| 相对而言不安全 | 相对而言安全一些 |
| 给服务器额外传递数据是有上限的 |
相对而言没有上限 |
| 便于分享 | 不便于分享 |