JQuery 的load()方法

最新推荐文章于 2018-12-12 14:21:22 发布

milk1626

最新推荐文章于 2018-12-12 14:21:22 发布

阅读量1.9k

点赞数

分类专栏：读书笔记 AJAX JQuery 文章标签： jquery javascript xhtml xmlhttprequest function button

本文链接：https://blog.csdn.net/milk1626/article/details/5455222

版权

读书笔记同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

AJAX

13 篇文章 0 订阅

订阅专栏

先看一个普通的实例：

14-1.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax获取数据过程</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","14-1.aspx",true);
xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
   document.getElementById("target").innerHTML = xmlHttp.responseText;
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

14-1.aspx：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.Write("异步测试成功，很高兴");
%>

以上是普通的Ajax，下面修改14.1.html为14.2.html

14.2.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery简化Ajax步骤</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
$("#target").load("14-1.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

介绍：

load(url,[data],[callback])

其中url为异步请求的地址，data用来向服务器传送请求数据，是可选参数，一旦data参数启用，整个过程将以post的方式进行，否则默认为get方式，callback为Ajax加载成功后运行的回调函数。

JQuery 的load()方法获取XML文档：

14-3.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>load()获取XML</title>
<style type="text/css">
p{
font-weight:bold;
}
span{
text-decoration:underline;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
$("#target").load("14-3.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

14-3.aspx：

<%@ Page Language="C#" ContentType="text/xml" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.ContentType = "text/xml";
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");

string xml = "<p id='kk'>p标记<span>内套span标记</span></p><span>单独的span标记</span>";
Response.Write(xml);
%>

采用load()方法获取的数据，不需要再单独设置成是responseText还是responseXML, 而且可以直接筛选XML中的标记。只需要在请求的url地址后面空格，再添上标记即可。修改14-3.html为14-4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>load()添加标记</title>
<style type="text/css">
p{
font-weight:bold;
}
span{
text-decoration:underline;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
//只获取<span>标记
$("#target").load("14-3.aspx span");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>