ajax
**今天，我就带你来了解一下ajax吧！**
首先我们得明白什么是ajax？那到底什么才是ajax呢？
AJAX = “Asynchronous Javascript And XML”（==异步 JavaScript 和 XML==）直译出来就是异步的JavaScript和数据传输技术。国内常翻译为**==“阿贾克斯”==**是指一种无需重新加载整个网页的情况下，能够更新部分网页的技术。直白的说，ajax就是js通过一个网址去加载数据。用户是看不见的，可以通过浏览器控制台中的网络查看。
上面说到，xml，我们就结合json来给你介绍~~~
==xml（可扩展标记语言）、json（轻量级数据格式）都是字符串的格式，都用于数据传输==
两者之间有什么区别呢？
**xml：**
优点：
1、传输的数据种类特别丰富
2、传输的数据量非常大
缺点：
解析起来比较麻烦
【注】用于大型门户网站，今日头条、腾讯新闻、网易新闻。
**json：**
优点：
1、解析起来非常方便
2、适合轻量级的数据
缺点：
1、种类比较少
【注】基本上90%以上应用用的都是json格式字符串传输。
同时说到异步，有的小伙伴就懵逼了，心想异步是啥，有什么作用呢？
了解异步之前，我们首先看看javas中的同步是什么吧！
==同步==：阻塞，当前程序必须等前面的程序执行完毕以后，才能运行。
举个例子：就好比我们做饭，饭做好了，才去做菜。
在JavaScript中，异步与同步是相反的存在，所以说异步就是什么呢？
==异步==：非阻塞，当前程序的执行和前面程序是否执行完毕没有关系。
举个例子：做饭的同时，我可以洗菜，切菜。
**总结着来说**：同步必须按照顺序一步一步执行，而异步就是不按顺序不管前面执不执行或者执行完不完毕我都执行！
ajax有什么好处？有什么缺点呢？
**AJAX的优点：**
1）页面无刷新更新数据：AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据；
2）异步与服务器通信：AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力；
3）前端和后端负载平衡：AJAX可以把以前一些服务端负担的工作转嫁到客户端，减轻服务器和带宽的负担，节约空间和宽带租用成本；
4）基于标准被广泛支持：AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件；
5）界面与应用分离：Ajax使WEB中的数据与呈现分离，有利于分工合作，提高效率。
**AJAX的缺点：**
1）AJAX干掉了Back和History功能：即对浏览器机制的破坏，在动态更新页面的情况下，用户无法回到前一个页面状态；
2）AJAX有安全问题：AJAX技术给用户带来很好的用户体验的同时也带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道；
3）对搜索引擎支持较弱：对搜索引擎优化不太友好；
4）破坏程序的异常处理机制：像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制；
5）AJAX不能很好支持移动设备：一些手持设备（如手机、PDA等）不能很好的支持Ajax。
**了解这些之后，我们接下来看看ajax是怎样操作的，具体步骤有哪些呢**？
总结为如下四步：
1.声明一个ajax对象
2.输入请求信息（三个参数）
第一个参数：请求的方式
get post
第二个参数：请求的url
第三个参数：是否异步
true（异步） false(同步)
3.发送
4.等待数据响应
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //1、声明一个ajax对象 var xhr = new XMLHttpRequest(); //2、输入请求的信息 /* 第一个参数：请求的方式 get post 第二个参数：请求的url 第三个参数：是否异步 true (异步) false (同步) */ xhr.open("get", "1.txt", true); //3、发送 xhr.send(); //4、等待数据响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } } } </script> </head> <body> <button id = 'btn1'>下载数据</button> </body> </html>
有一种浏览器兼容的写法：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //1、声明一个ajax对象 /* XMLHttpRequest 在低版本的IE浏览器下并不兼容 */ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //2、输入请求的信息 /* 第一个参数：请求的方式 get post 第二个参数：请求的url 第三个参数：是否异步 true (异步) false (同步) */ xhr.open("get", "1.txt", true); //3、发送 xhr.send(); //4、等待数据响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } } } </script> </head> <body> <button id = 'btn1'>下载数据</button> </body> </html>
**明白了嘛？明白了接下来我们在了解一个很有用又有趣的东西：try-throw-catch**
格式：
try{
我们要去执行的代码;
throw new Error("错误文本");
}catch(error){ 补救代码; }
执行：
1、先去执行try中的代码
2、如果try中的代码执行正常，catch中的代码就不执行了
3、如果try中的代码执行异常(包括throw手动抛出异常)，执行catch中的代码进行补救。
【注】同时，error是try中异常信息。
【注】最大用处的，用于代码调试。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script>
try{
alert("认识成果");
alert("追到手");
alert("娶成果");
throw new Error("追到手代码执行正常");
}catch(error){
alert("我是补救代码：" + error);
//我是补救代码：ReferenceError: num is not defined
}
alert("我是最后的代码")
</script>
</head>
<body>
</body>
</html>
好玩吧！
上面ajax中出现的get和post不陌生吧！是不是似曾相识，在那见过吧~~~那呢，对了！表单！那接下来我们就看看ajax中的get与post有什么区别。
get参数通过url传递，post放在请求体（request body）中；
get请求在url传递的参数有长度限制，而post没有；
get比post更不安全，因为参数直接显示在url地址中，所以不能传递敏感数据；
get请求浏览器会主动缓存，而post不会；
get请求参数会保存在浏览历史记录，而post请求不会；
get和post本质上都是tcp连接。
get请求在url传递的参数有长度限制，而post没有；
get比post更不安全，因为参数直接显示在url地址中，所以不能传递敏感数据；
get请求浏览器会主动缓存，而post不会；
get请求参数会保存在浏览历史记录，而post请求不会；
get和post本质上都是tcp连接。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var aBtns = document.getElementsByTagName("button"); aBtns[0].onclick = function(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } var str = "username=tian&age=18&password=123abc"; xhr.open("get", "code14/1.get.php?" + str, true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status); } } } } aBtns[1].onclick = function(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } var str = "username=tian&age=18&password=123abc"; xhr.open("post", "code14/1.post.php", true); //设置提交数据格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //post提交的数据是通过send方法进行传参的，注意post提交的数据不加xhr.send(str); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status) } } } } } </script> </head> <body> <button>GET请求</button> <button>POST请求</button> </body> </html>
**readystatechange事件**
xhr.readyState 值发生变化的时候，会触发上述的这个事件
0 (初始化)没有调用open方法的时候
1 (载入)已经调用send方法，发送请求
2 (载入完成)send方法已经发送完毕，接受到了所有的响应
3 (解析)正在解析响应内容
4 (完成)内容解析完成，可以在客户端调用了
responseText 响应文本，以字符串的形式返回我们请求的数据。
**常见的status（状态码）：**
200：请求成功
301：网页被重定向到其他url
304：文件未被修改，使用缓存资源
404：找不到此网页（指定的资源）
500：服务器内部错误
......
当然想知道更多状态可以去自己找！下面提供一个可跳转的超链接页面：
[更多状态码](https://www.runoob.com/http/http-status-codes.html)
**查询字符串形式：**
search(查询字符串)：?name1=value1&name2=value2
querystring(查询字符串): name1=value1&name2=value2
search(查询字符串)：?name1=value1&name2=value2
querystring(查询字符串): name1=value1&name2=value2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script>
//传入对象，拼接成querystring
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
//username=tian&age=20&sex=男
alert(querystring({
username: "tian",
age: 20,
sex: "男"
}))
</script>
</head>
<body>
</body>
</html>
**最后封装一个ajax函数，记得收藏哦！**
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /* type 代表 请求方式 url 代表 请求url路径 data 代表 发送数据 */ function $ajax(type, url, objData){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } if(type == "get" && objData){ url += "?" + querystring(objData); } xhr.open(type, url, true); if(type == "get"){ xhr.send(); }else{ //设置提交数据格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); objData ? xhr.send(querystring(objData)) : xhr.send(); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status); } } } } function querystring(obj){ var str = ''; for(var attr in obj){ str += attr + "=" + obj[attr] + "&"; } return str.substring(0, str.length - 1); } window.onload = function(){ var aBtns = document.getElementsByTagName("button"); aBtns[0].onclick = function(){ $ajax("get", "code14/1.get.php", { username: "小明", age: 40, password: "123abc" }); } aBtns[1].onclick = function(){ $ajax("post", "code14/1.post.php", { username: "小花", age: 18, password: "123abc" }); } } </script> </head> <body> <button>GET请求</button> <button>POST请求</button> </body> </html>
==记得一定要用控制台网络查看请求数据形态哦！==
最后，希望我的文章能给你带来微妙的帮助，一起奥利给！！！当然如果你对前端开发的学习有兴趣，可以在B站上找寻码农雨飞的免费前端学习视频，代码免费送。http://www.bilibili.com/video/av77505416.当然也可以留言评论加关注与我畅所欲谈共同漫步于知识的海洋。。。。
```
