AJAX常用的4种请求方式

最新推荐文章于 2024-01-06 15:35:25 发布

追0逐

最新推荐文章于 2024-01-06 15:35:25 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_34161916/article/details/84133023

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生的ajax请求响应如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    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.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //响应
            //document.getElementById("myDiv").innerHTML=xmlhttp.responseXML;
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/statics/demosource/demo_get.php",true);//1.请求方式，2.请求URL，3.请求是异步/同步
    xmlhttp.send();//发送
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

<1>$.ajax()返回其创建的 XMLHttpRequest 对象：

$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。

如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 "text/xml")。

实例：

保存数据到服务器，成功时显示信息。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax请求方式</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function loadJSON(){
	$.ajax({
		type:"post",
		dataType:"html",
		url:"ajax.txt",//自定义请求url
		data:$("#p1").serialize(),
		async:true,
		error:function(){
			alert("connection not!");
		},
		success:function(data){
			alert("ajax.txt="+data);
		}
	});
}
</script>
</head>
<body>
	<button type="button" onclick="loadJSON()">Update</button>
	<p id="p1">点击Update弹出窗口并显示ajax.txt文件的内容</p>
</body>
</html>

<2>通过远程 HTTP GET 请求载入信息:

相比于复杂的$.ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$.ajax。

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>www.w3cschool.cn</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function loadJSON() {
		$.get("ajax.txt", function(data) {
			alert("ajax.txt=" + data);
		});
	}
</script>
</head>
<body>
	<button type="button" onclick="loadJSON()">Update</button>
	<p id="p1">点击Update弹出窗口并显示ajax.txt文件的内容</p>
</body>
</html>

<3>通过远程 HTTP POST 请求载入信息:

POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用 $.ajax请求。

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>www.w3cschool.cn</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function loadJSON() {
		$.post("ajax.txt", function(data) {
			alert("ajax.txt=" + data);
		});
	}
</script>
</head>
<body>
	<button type="button" onclick="loadJSON()">Update</button>
	<p id="p1">点击Update弹出窗口并显示ajax.txt文件的内容</p>
</body>
</html>

<4>通过 HTTP GET 请求载入 JSON 数据:

实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>www.w3cschool.cn</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function loadJSON() {
		$.getJSON("ajax.txt", function(data) {
			alert("ajax.txt=" + data);
		});
	}
</script>
</head>
<body>
	<button type="button" onclick="loadJSON()">Update</button>
	<p id="p1">点击Update弹出窗口并显示ajax.txt文件的内容</p>
</body>
</html>

备注：$.ajax()、$.get()、$.post()、$.getJSON()这四个方式都是jquery封装好的方法，当然其本质仍然是JavaScript。这四个方法中都还有其他参数，以上仅仅是简略讲解。详情请度娘！

追0逐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX常用的4种请求方式

原生的ajax请求响应如下：<!DOCTYPE html><html><head><meta charset="utf-8"><script>function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) { ...
复制链接

扫一扫