Ajax

最新推荐文章于 2024-07-18 10:00:11 发布

vuscity

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量88

点赞数

分类专栏： # 前端文章标签： ajax js jquery

本文链接：https://blog.csdn.net/vuscity/article/details/115824167

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

js-Ajax（纯Ajax）
jQuery-Ajax

🔗W3school的Ajax教程

js-Ajax（纯Ajax）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = 异步 JavaScript and XML

XMLHttpRequest

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持 XMLHttpRequest 对象，除了IE5 和 IE6 使用 ActiveXObject。
XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。

js中创建XMLHttpRequest对象：

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

GET与POST请求

方法： open() 、send()、setRequestHeader()

XMLHttpRequest 对象的方法：
在这里插入图片描述

代码：异步

异步：

无需等待服务器的响应
在等待服务器响应过程中，执行其他脚本；当响应就绪后，则对响应进行处理

示例代码：

// 异步
// 在响应处于就绪状态时， onreadystatechange 事件中的执行的函数
xmlhttp.onreadystatechange=function(){
	if(xmlhttp.readyState==4 && xmlhttp.status==200){
 		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  	}
}
// async=true
xml.open(method, url, true);

（1）无信息的GET

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(){
	var xmlhttp;
	// 创建MLHttpRequest对象
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	}else{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 异步
	xmlhttp.onreadystatechange=function(){
  		if(xmlhttp.readyState==4 && xmlhttp.status==200){
    		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    	}
 	}
 	// 发送部分
	xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);		// 用随机数向URL添加一个唯一的ID：防止得到的是缓存结果
	xmlhttp.send();
}
</script>
</head>

<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

（2）有信息的GET

将（1）中的 发送部分 代码改为：

xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

（3）无信息的POST

将（1）中的 发送部分 代码改为：

xmlhttp.open("POST","/ajax/demo_post.asp",true);
xmlhttp.send();

（4）有信息的POST

将（1）中的 发送部分 代码改为：

xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

代码：同步

同步：

JavaScript 会等到服务器响应就绪才能继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

示例代码：

// 同步
// async=false
xml.open(method, url, false);
xml.send();
// 响应部分不在 onreadystatechange 中
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

jQuery-Ajax

编写常规的纯 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。
jQuery 提供多个与 AJAX 有关的方法。

🔗jQuery 参考手册 - Ajax

.load()

load(url,data,function(response,status,xhr))

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

.get()

$.get(URL,callback);

参数	说明
必需的 URL	请求的 URL
可选的 callback	请求成功后所执行的函数名

代码示例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("/example/jquery/demo_test.asp",function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>
</head>
<body>

<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

</body>
</html>

.post()

$.post(URL,data,callback);

参数	说明
必需的 URL	请求的 URL
可选的 data	连同请求发送的数据
可选的 callback	请求成功后所执行的函数名

代码示例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/example/jquery/demo_test_post.asp",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>
</head>
<body>

<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

</body>
</html>

vuscity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

文章目录js-Ajax（纯Ajax）XMLHttpRequestGET与POST请求方法： open() 、send()、setRequestHeader()代码：异步（1）无信息的GET（2）有信息的GET（3）无信息的POST（4）有信息的POST代码：同步jQuery-Ajax.load().get().post()????W3school的Ajax教程js-Ajax（纯Ajax）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。是一种在无需重新加载整个网页的情况下，能够更新部分
复制链接

扫一扫