jQuery+Ajax 笔记 - Ajax
Ajax的封装
- Ajax实例
-
- 1、创建 XMLHttpRequest 对象
- 2、设置请求方式和请求地址
- 3、发送请求
- 4、监听状态的变化
- 5.处理返回的结果
- Ajax创建完成
- Ajax的GET封装
-
- 1、建立简单的Ajax
- 2、将不确定的参数让调用者传递进来
- 3、设置服务器响应时间
- Ajax的GET封装及使用
- Ajax的POST封装
-
- 1、建立简单的Ajax
- 2、将不确定的参数让调用者传递进来
- 3、设置服务器响应时间
- Ajax的POST封装及使用
- Ajax的jQuery封装
- Ajax与XML
-
- 普通文件内容(数据)
- xml文件内容(数据)
- Ajax与JSON
写在前面： 此博客记录自己学习jQuery学习笔记，如有侵权，联系删！
学习来源： 李南江亲授-jQuery+Ajax从放弃到知根知底
李南江老师各平台账号：
- 微博：极客江南
- 微信公众号：李南江
- 腾讯课堂： 李南江
- 网易云课堂：李南江
Ajax
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
什么是 AJAX ？ - AJAX = 异步 JavaScript 和 XML。
- AJAX 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
- 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
Ajax实例
接下来我们一起创建一个Ajax实例
创建Ajax有以下几个步骤：
1、创建 XMLHttpRequest 对象
XMLHttpRequest对象
- 所有现代浏览器均支持
XMLHttpRequest对象（IE5 和 IE6 使用ActiveXObject）。 XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest对象的语法：
var xmlhttp=new XMLHttpRequest();
版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2、设置请求方式和请求地址
如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和 send()方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 |
| method：请求的类型；GET 或 POST | |
| url：文件在服务器上的位置 | |
| async：true（异步）或 false（同步） |
GET 请求
一个简单的 GET 请求：
xmlhttp.open("GET","demo_get.asp",true);
在上面的例子中，您可能得到的是缓存的结果。为了避免这种情况，请向 URL 添加一个唯一的 ID、随机数或者时间戳（为了防止URL后每次添加的数据不一样，有效的避免缓存）。
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
POST 请求
一个简单 POST 请求：
xmlhttp.open("POST","demo_post.asp",true);
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader()来添加 HTTP 头。然后在 send()方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) | 向请求添加 HTTP 头。 |
| header: 规定头的名称 | |
| value: 规定头的值 |
3、发送请求
| 方法 | 描述 |
|---|---|
| send(string) | 将请求发送到服务器。 |
| string：仅用于 POST 请求 |
xmlhttp.send();
4、监听状态的变化
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | |
| 1: 服务器连接已建立 | |
| 2: 请求已接收 | |
| 3: 请求处理中 | |
| 4: 请求已完成，且响应已就绪 | |
| status | 200: “OK” |
| 404: 未找到页面 |
xmlhttp.onreadystatechange = function (ev) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
console.log("没有接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
5.处理返回的结果
请求成功后，便可处理返回结果
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
//处理返回的结果
console.log("没有接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
Ajax创建完成
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
alert(xmlhttp.responseText);
}else{
alert("请求失败");
}
}
}
Ajax的GET封装
1、建立简单的Ajax
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
alert(xmlhttp.responseText);
}else{
alert("请求失败");
}
}
}
2、将不确定的参数让调用者传递进来
function ajax(url,obj,success,error){
// 将传进来的对象转换为字符串
var str = objConversion(obj);// key=value&key=value;
var xmlhttp;
// 判断浏览器是否兼容
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 为了得到服务器最新的数据，在url后加上时间戳
xmlhttp.open("GET",url+"?"+str,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
success(xmlhttp);
}else{
// alert("请求失败");
error(xmlhttp);
}
}
}
}
function objConversion(obj) {
/*对象格式
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
// 创建时间戳
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
3、设置服务器响应时间
让用户传入一个响应时间timeout
// 判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout);
}
Ajax的GET封装及使用
由此，整个Ajax的GET请求封装就完成了
function ajax(url,obj,timeout,success,error){
// 将传进来的对象转换为字符串
var str = objConversion(obj);// key=value&key=value;
var xmlhttp,timer;
// 判断浏览器是否兼容
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 为了得到服务器最新的数据，在url后加上时间戳
xmlhttp.open("GET",url+"?"+str,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
clearInterval(timer);
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
success(xmlhttp);
}else{
// alert("请求失败");
error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout);
}
}
function objConversion(obj) {
/*对象格式
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
// 创建时间戳
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
由用户调用
ajax("04-ajax-get.php", //url
{"userName":"lnj", //obj
"userPwd":"123456"},
3000, //timeout
function (xhr) {
alert(xhr.responseText); //success
},
function (xhr) {
alert("请求失败"); //error
}
);
Ajax的POST封装
1、建立简单的Ajax
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","08-ajax-post.php?"+(new Data.getTime()),true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=lnj&userPwd=321");
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
alert(xmlhttp.responseText);
}else{
alert("请求失败");
}
}
}
2、将不确定的参数让调用者传递进来
function ajax(url,obj,success,error){
// 将传进来的对象转换为字符串
var str = objConversion(obj);// key=value&key=value;
var xmlhttp;
// 判断浏览器是否兼容
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 为了得到服务器最新的数据，在url后加上时间戳
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
success(xmlhttp);
}else{
// alert("请求失败");
error(xmlhttp);
}
}
}
}
function objConversion(obj) {
/*对象格式
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
// 创建时间戳
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
3、设置服务器响应时间
让用户传入一个响应时间timeout
// 判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout);
}
Ajax的POST封装及使用
由此，整个Ajax的GET请求封装就完成了
function ajax(url,obj,timeout,success,error){
// 将传进来的对象转换为字符串
var str = objConversion(obj);// key=value&key=value;
var xmlhttp,timer;
// 判断浏览器是否兼容
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 为了得到服务器最新的数据，在url后加上时间戳
xmlhttp.open("GET",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4){
clearInterval(timer);
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// alert("请求成功");
success(xmlhttp);
}else{
// alert("请求失败");
error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout);
}
}
function objConversion(obj) {
/*对象格式
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
// 创建时间戳
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
由用户调用
ajax("POST", "08-ajax-post.php", //url
{"userName":"lnj", //obj
"userPwd":"321"},
3000, //timeout
function (xhr) {
alert(xhr.responseText); //success
},
function (xhr) {
alert("请求失败"); //error
}
);
Ajax的jQuery封装
Ajax的封装
// ajax接收的对象：option
function ajax(option) {
// 0.将对象转换为字符串
var str = objConversion(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
if(option.type.toLowerCase() === "get"){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
function objConversion(obj) {
/*对象格式
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
// 创建时间戳
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
用户调用ajax()
ajax({
url:"04-ajax-get.php",
data:{
"userName":"lnj",
"userPwd":"123456"
},
timeout: 3000,
type:"post",
success: function (xhr) {
alert(xhr.responseText);
},
error: function (xhr) {
alert("请求失败");
}
});
Ajax与XML
普通文件内容(数据)
{
"nz":{
"title":"甜美|女装",
"des":"人见人爱,花间花开,甜美系列",
"image":"images/1.jpg"
},
"bb":{
"title":"奢华驴包",
"des":"送女友,送情人,送学妹,一送一个准系列",
"image":"images/2.jpg"
},
"tx":{
"title":"键盘拖鞋",
"des":"程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有",
"image":"images/3.jpg"
}
}
服务器php中的内容
echo file_get_contents("10-ajax-test.txt");
?>
使用者调用```ajax``
ajax({
type:"get",//请求方式：get
url:"10-ajax-test.php",//请求地址
data:{"name":this.getAttribute("name")},//请求数据
timeout: 3000,//请求时间
success: function (xhr) {
var name = self.getAttribute("name");//获取当前点击的name
var str = xhr.responseText;//获取返回成功后的文本内容
var obj = JSON.parse(str);//将文本内容装换为json格式
// console.log(obj);
var subObj = obj[name];//查找到name相关数据
// console.log(subObj);
oTitle.innerHTML = subObj.title;
oDes.innerHTML = subObj.des;
oImg.setAttribute("src", subObj.image);
},
error: function (xhr) {
alert(xhr.status);
}
});
xml文件内容(数据)
<person>
<name>李南江name>
<age>33age>
person>
服务器php中的内容
如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置header("content-type:text/html; charset=utf-8");
// 执行结果中有中文, 必须在php文件顶部设置
//header("content-type:text/html; charset=utf-8");
// 如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置
header("content-type:text/xml; charset=utf-8");
echo file_get_contents("info.xml");
?>
使用者调用```ajax``
ajax({
type:"get",//请求方式：get
url:"11-ajax-xml.php",//请求地址
success: function (xhr) {
// console.log(xhr.responseXML);
// console.log(document);
var res = xhr.responseXML;//获取返回成功后的xml内容
console.log(res.querySelector("name").innerHTML);
console.log(res.querySelector("age").innerHTML);
},
error: function (xhr) {
console.log(xhr.status);
}
});
Ajax与JSON
文本的内容
{
"name":"lnj",
"age":"33"
}
服务器php中的内容
echo file_get_contents("12-ajax-json.txt");
?>
使用者调用```ajax``
ajax({
type:"get",//请求方式：get
url:"12-ajax-json.php",//请求地址
success: function (xhr) {
// console.log(xhr.responseXML);
// console.log(document);
var str = xhr.responseText;//获取返回成功后的文本内容
/*
在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容
*/
var obj = JSON.parse(str);//将文本内容装换为json格式
// console.log(obj);
console.log(obj.name);
console.log(obj.age);
},
error: function (xhr) {
console.log(xhr.status);
}
});