jQuery+Ajax 笔记 - Ajax

最新推荐文章于 2021-12-21 17:47:12 发布

Jasivc

最新推荐文章于 2021-12-21 17:47:12 发布

阅读量200

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36695838/article/details/114294249

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

写在前面： 此博客记录自己学习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中的内容

<?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文件内容(数据)

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>李南江</name>
    <age>33</age>
</person>

服务器php中的内容
如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置header("content-type:text/html; charset=utf-8");

<?php
// 执行结果中有中文, 必须在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中的内容

<?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);
	}
});

Jasivc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery+Ajax 笔记 - Ajax

Ajax的封装Ajax实例1、创建 XMLHttpRequest 对象2、设置请求方式和请求地址3、发送请求4、监听状态的变化5.处理返回的结果Ajax创建完成Ajax的GET封装1、建立简单的Ajax2、将不确定的参数让调用者传递进来3、设置服务器响应时间Ajax的GET封装及使用Ajax的POST封装1、建立简单的Ajax2、将不确定的参数让调用者传递进来3、设置服务器响应时间Ajax的POST封装及使用Ajax的jQuery封装写在前面：此博客记录自己学习jQuery学习笔记，如有侵权，联系删！
复制链接

扫一扫