```go
**今天，我就带你来了解一下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格式字符串传输。
同时说到异步，有的小伙伴就懵逼了，心想异步是啥，有什么作用呢？
**今天，我就带你来了解一下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.等待数据响应
```javascript
<!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>
```
有一种浏览器兼容的写法：
```javascript
<!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中异常信息。
【注】最大用处的，用于代码调试。
```javascript
<!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连接。==
```javascript
<!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);
}
}
}
}
<!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)
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
```javascript
<!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>
//传入对象，拼接成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函数，记得收藏哦！**
```javascript
<!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.当然也可以留言评论加关注与我畅所欲谈共同漫步于知识的海洋。。。。
```
<!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.当然也可以留言评论加关注与我畅所欲谈共同漫步于知识的海洋。。。。
```
