Ajax

最新推荐文章于 2022-01-24 16:34:25 发布

潇授大帝

最新推荐文章于 2022-01-24 16:34:25 发布

阅读量115

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/weixin_39642150/article/details/98947220

版权

html 专栏收录该内容

24 篇文章

订阅专栏

本文深入解析了jQuery中的Ajax方法，包括load、get、post、getJSON、getScript及ajax等的使用方法，展示了如何通过这些方法实现异步数据获取、错误处理、序列化表单等操作，同时介绍了原生Ajax的请求和响应机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery-Ajax

load (url class)

局部方法，适合做静态文件的异步获取

例：

//把test.txt中ｃｌａｓｓ为url 的内容加载到id为box的标签中
$("#box").load("test.txt .url")

//get方式提交
$("#box").load("test.php?url=ycku");

//post方式提交
$("#box").load("test.php",{
	ur:'ycku'
});

//回调函数
$("#box").load("test.php",{ur:'ycku'},function(response,status,xhr){
	//alert(response);
	//$("#box").html(response+"123");
	//if(status=="success"){alert("成功处理")}
});

get(file,data,func,type)

file -> 文件　data -> 数据　func -> 方法　type -> 强行转为某格式

//问号传参
$("input").click(function(){
	$.get("test.php?url=ycku",function(response,status,xhr){
		$("#box").html(response);
	})
});

//data传参
$("input").click(function(){
	$.get("test.php","url=ycku",function(response,status,xhr){
		$("#box").html(response);
	})
});

//键值对传参
$("input").click(function(){
	$.get("test.php",{
		url:"ycku"
	},function(response,status,xhr){
		$("#box").html(response);
	})
});

post(file,data,func,type)

file -> 文件　data -> 数据　func -> 方法　type -> 强行转为某格式

//data传参
$("input").click(function(){
	$.get("test.php","url=ycku",function(response,status,xhr){
		$("#box").html(response);
	})
});

//键值对传参
$("input").click(function(){
	$.post("test.php",{
		url:"ycku"
	},function(response,status,xhr){
		$("#box").html(response);
	})
});

//错误处理
$.post("user.php").error:function(xhr,errorText,errorType){
			alert(xhr.status+":"+xhr.statusText);
		}

getJSON(file,func)

$("input").click(function(){
	$.getJSON("test.json",function(response,status,xhr){
		alert(response[0].url);
	})
});

getScript()

js文件被呼唤时才被加载，节省性能，且不需要引入该js文件

$("input").click(function(){
	$.getScript("test.js");
	})
});

ajax()

$("input").click(function(){
	$.ajax({
		type:"post",
		url:"text.php",
		data:{word:"xiao"},
		success:function(response,status,xhr){
			$("#box").html(response);
		},
		timeout:3000,
		global:false,
		error:function(xhr,errorText,errorType){
			alert(xhr.status+":"+xhr.statusText);
		}
	});
});

//序列化表单
$("form input[type=button]").click(function(){
	$.ajax({
		type:"post",
		url:"text.php",
		data:$("form").serialize(),
		//var json = $(this).serializeArray();	获取json形式
		success:function(response,status,xhr){
			$("#box").html(response);
		}
	});
});

//初始化重复属性
	$.ajaxSetup({
		type:"post",
		url:"text.php",
		data:$("form").serialize()
	});

ajaxStart() / ajaxStop()

//请求加载提示的显示和隐藏
$(",loading").ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

ajaxSend() 请求之前执行

ajaxComplete() 请求完成后，无论是否成功执行

ajaxSuccess() 请求成功后执行

ajaxError() 请求失败后执行

原生Ajax

XHR请求

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

xmlhttp.open("GET","ajax_test.html",true);

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

XHR响应

responseText //获得字符串形式的响应数据。

responseXML //获得 XML 形式的响应数据。

onreadystatechange事件

onreadystatechange //每当 readyState 属性改变时，就会调用该函数。

readyState //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status //200: “OK”，404: 未找到页面