同步方式、异步方式
在介绍AJAX技术之前，我们首先要了解同步请求和异步请求的概念。
1. 同步请求：
概念： 发送方在发出请求之后，需要等待接收方发回响应，在发回响应之前，用户界面做任何的操作都是无效的，只有等待接收方发回响应之后，才能响应用户交互，发送下一个数据包的通讯方式。
发送请求 --> 等待服务器处理请求（当前浏览器的任何操作无效） --> 处理完毕返回
2. 异步请求：
概念： 发送方在发送请求之后，会有单独的子线程去请求数据，而主线程依然响应处理用户交互，所以此时用户交互得到处理，用户流畅操作，用户体验比较好，不需要等待接收方的响应，直接发送下一个数据包的通讯方式。
发送请求 --> 服务器处理（浏览器可以进行别的操作） --> 处理完毕
请求方式（GET、POST）
当介绍完同步、异步方式后，还要介绍两种请求方式：
1. GET请求方式
- get是从服务器上获取数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。 但由于出现在URL中，存在安全隐患。
- 对于get方式，服务器端用Request.QueryString获取变量的值。
- get传送的数据量较小，不能大于2KB。
5 get安全性非常低。
2. POST请求方式
- post是向服务器传送数据。
- post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML
HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 - 对于post方式，服务器端用Request.Form获取提交的数据。
- post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
- post安全性较高。
由于 post方式没有将参数包含在URL内，而post方式会比get方式安全一点，它将参数隐藏起来，我们可以点开浏览器的开发者选项进入network部分，就可以查看到提交的数据。
如下图所示：
注意：由于可以利用抓包工具 Fiddler 、Charles 等抓取数据包，也可以查看提交的数据，因此post方式并不是绝对的安全。
Ajax技术的相关介绍
由同步异步方式，以及get和post请求方式，可以引出我们的AJAX技术：
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种对于现有技术的结合，是一种支持异步请求的技术。核心是js对象-XMLHttpRequest。
优点：
1. 不需要重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
2. 不需要任何浏览器插件，只要求JavaScript能在浏览器执行。
在浏览器中，我们不需要刷新页面，就可以通过ajax技术来获取新的内容，就好比QQ空间动态是永远刷不完的。
AJAX技术的使用步骤及相关应用
1. 工作原理（AJAX 应用模型）
2. AJAX的使用步骤
五部曲：
1） 创建异步对象(XMLHTTPRequest)
//创建异步对象
var ajax = new XMLHttpRequest();2）设置method和url（open()方法）
//设置跟服务端交互的信息
ajax.open('get','ajax.php?userName=jack');注意：如果使用post提交数据，必须加上一句（在发送请求之前加上这句话）
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");3） 发送请求（send()方法）
浏览器———–>请求报文———–>服务器
然后服务器将创建一个php文件，获取上传的数据（可选的），再返回给用户。
//发送请求
ajax.send();4） 注册事件
//接受服务器反馈
ajax.onreadystatechange = function () {
//为判断服务器是否做出正确反应
if(ajax.readyState == 4 && ajax.status == 200 ) {
//打印相应内容
console.log(ajax.responseText);
}
}
5）在事件中获取返回的数据，修改页面显示
服务器———响应报文———>在事件中获取返回的数据，修改页面显示
3. AJAX的五部曲详细用法
1）创建XMLHttpRequest对象（兼容写法）
//新版本浏览器
var ajax = new XMLHttpRequest();
//IE5，6
var ajax = new ActiveXObject("Microsoft.XMLHTTP");因此兼容性写法：
var ajax;
if(XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}2）发送请求
open( method,url,async)
- method： 请求的类型，GET或POST
- url： 文件在服务器上的位置
- async： true（异步），false（异步）
send()
3） POST方式的注意点
form表单如果使用post方式提交数据，则必须使用XMLHttpRequest对象的setRequestHeader()方法。来添加http头，再用send方法添加想要发送的数据。
//发送与服务器端交互的信息
ajax.open("POST","ajax_test.php",true);
//设置http头
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
ajax.send("fname=Bill&lname=Gates");4）onreadystatechange()事件（当readyState属性发生变化时，就会调用该事件）
- readyState： 存有XMLHttpRequest对象的状态
| 属性值 | 对象状态 |
|---|---|
| 0 | 请求未初始化 |
| 1 | 请求已经建立 |
| 2 | 请求已接收 |
| 3 | 请求处理中 |
| 4 | 请求已完成，且相应已就绪（需要的状态） |
- status：
| 属性值 | 状态 |
|---|---|
| 200 | “ OK，页面存在 ” |
| 404 | “ 未找到页面 ” |
5） 服务器响应内容
如果响应的是普通字符串，则使用responseText，如果响应的是XML，则使用responseXML。
- responseText： 获取字符串形式的响应数据
- responseXML： 获取XML形式的响应数据
在这里需要详细介绍一下responseText以及responseXML。
① responseText（获取到的数据以字符串形式）
获取的内容整个当做字符串
console.log(ajax.responseText);//将得到一个字符串② responseXML（一个xml对象）
responseXML是专门一个属性用来获取xml对象
注意： xml对象在浏览器端就是一个document对象，解析时可以直接使用querySelector或getElementById等document语法
console.log(ajax.responseXML);//将得到一个document对象
console.log(ajax.responseXML.querySelector('name').innerHTML);其中：
XML文件格式：自己定义key值，且key以双标签形式存在
1. 开头
<?xml version="1.0" encoding="UTF-8"?>
2. 根节点 如：
<person></person>
3. 若干子节点：
<name>王狗蛋</name>
<age>15</age>
<sex>男</sex>
<hobby>eating</hobby>
<skill>play games</skill> <?xml version="1.0" encoding="UTF-8"?>
<person>
<name>王狗蛋</name>
<age>15</age>
<sex>男</sex>
<hobby>eating</hobby>
<skill>play games</skill>
</person>
③ xml的格式
当需要用到reponseXML时，就需要了解XML的格式。
- 是按照某种既定的格式写的字符串
- 最开始要写版本号（可选的）
- 通通使用双标签
- 最外层需要写一个根节点
- 标签的名字是可以随便编写的
- 不可以使用数字开头
- 不可以使用中文
如果写了版本号，就要放在第一行
4. 使用ajax案例
1）ajax——–get方式
<h2>ajax请求 --- get方式</h2>
<input type="text" class='user' >
<input type="button" class='btnAjax' value='发送ajax请求'><script>
var btn = document.querySelector(".btnAjax");
var userName = document.querySelector('.user');
//按钮的点击事件
btn.onclick = function () {
//创建异步对象
var ajax = new XMLHttpRequest();
//设置method和url（利用open方法）
//url内的key要和php文件中$_GET['key']中的key一样
ajax.open('get', '01.php?name='+userName.value);
//发送ajax请求
ajax.send();
//注册事件
//onreadystatechange()
ajax.onreadystatechange = function () {
if(ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
}
</script>01.php页面
header("content-type:text/html;charset=utf-8");
echo $_GET["name"].'欢迎你！！';2）ajax———-post方式
与get方式类似，只有两点不同
- 需要在发送请求前（send方法前）加上一句
//post方式发送数据，需要利用setRequestHeader（）来声明http头
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");- post方式请求的数据放在send()方法内
格式：(‘name=jack&age=18’)
//在send方法中来规定希望发送的数据
ajax.send('name='+inpContent.value);
jQuery中的ajax()、get()以及post()方法
jquery中实现Ajax功能的有以下三个方法：
1. $.ajax()
有以下等参数：
| 参数名 | 参数描述 |
|---|---|
| data | 规定发送到服务器上的数据 |
| dataType | 规定服务器返回的数据的类型（xml，html，script，json，jsonp，text） |
| success | 请求成功后调用的方法 |
| url | 规定将请求发送到哪个URL上 |
| type | 决定是哪种请求方式—（post或get） |
| error | 请求失败时调用的方法 |
| sendBefore | 回调函数 （请求发送前调用） |
注意：
- 如果dataType的值为json的话，它内部会自动生成一个js对象
- 在sendBefore回调函数中，如果return false，将取消这次请求
具体代码如下：
$.ajax({
url: 'demo.php',
type: 'post',
data: 'name=zhangsan',
//dataType的使用，如果服务器发来的数据和dataType属性值不同的话，会出现乱码
dataType: 'text',
success: function (data) {
console.log(data);
},
beforeSend: function () {
console.log('发送之前调用');
//return false;将取消这次请求
},
error: function () {
console.log('请求失败了！');
}
});
2. $.get()
格式：$.get(url,data,success(data){},dataType)
参数：
| 参数名 | 参数描述 |
|---|---|
| url | 规定将请求发到哪个URL上 |
| data | 规定连同请求一起发送到服务器上的数据，支持将数据写成js对象的格式 |
| success(data) | 回调函数，当请求成功，调用的函数 |
| dataType | 从服务器获得的数据的类型 |
具体代码如下：
$.get('demo.php',{name:'zhangsan',age:'18'},function (data){
console.log(data);
},'text');3. $.post()
格式： $.post(url,data,success(data){},dataType)
参数：
| 参数名 | 参数描述 |
|---|---|
| url | 规定将请求发到哪个URL上 |
| data | 规定连同请求一起发送到服务器上的数据，支持将数据写成js对象的格式 |
| success(data) | 回调函数，当请求成功，调用的函数 |
| dataType | 从服务器获得的数据的类型 |
具体代码如下：
$.post('demo.php',{name:'zhangsan',age:'18'},function (data){
console.log(data);
},'text');