jQuery中Ajax的load方法详解

　　先来看一个Ajax例子

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　</head>

　　<body>

　　</body>

　　function Ajax() {

　　var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest对象

　　if(window.ActiveXObject) {

　　xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

　　} else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

　　xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest对象

　　}

　　if(xmlHttpReq != null) {

　　xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并采用异步方式

　　xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数

　　xmlHttpReq.send(null);//因为使用get方式提交，所以可以使用null参调用

　　}

　　function RequestCallBack() {//一旦readyState值改变，将会调用这个函数}

　　if(xmlHttpReq.readyState == 4) {

　　if(xmlHttpReq.status == 200) {

　　//将xmlHttpReq.responseText的值赋予id为resText的元素

　　document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

　　}

　　</script>

　　</html>

　　test.jsp的内容：

复制代码代码如下:

　　<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

　　<%out.println("Hello Ajax!");%>

　　下面来看下jQuery中的Ajax

　　1.load()

　　load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中。

　　远程HTML代码：

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　</head>

　　<body>

　　</div>

　　</div>

　　</div>

　　</body>

　　</html>

　　load()载入HTML

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　<style>

　　* { margin:0; padding:0;}

　　body { font-size:12px;}

　　.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

　　.comment h6 { font-weight:700; font-size:14px;}

　　.para { margin-top:5px; text-indent:2em;background:#DDD;}

　　</style>

　　</head>

　　<body>

　　</body>

　　$(function () {

　　$("#send").click(function () {

　　$("#resText").load("test.html");

　　});

　　})

　　/**

　　* jQuery中的Ajax

　　* jQuery对Ajax操作进行了封装，

　　* 在jQuery中$.ajax()方法属于最底层的方法，

　　* 第2层是load()、$.get()、$.post()方法

　　* 第3层是$.getScript()和$.getJSON()方法

　　* load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。

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

　　* url String 请求HTML界面的URL地址

　　* data(可选) Object 发送至服务器的key/value数据

　　* callback(可选) Function 请求完成时的回调函数，无论请求成功或失败

　　* */

　　</script>

　　</html>

　　load()载入筛选后的HTML文档

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　<style>

　　* { margin:0; padding:0;}

　　body { font-size:12px;}

　　.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

　　.comment h6 { font-weight:700; font-size:14px;}

　　.para { margin-top:5px; text-indent:2em;background:#DDD;}

　　</style>

　　</head>

　　<body>

　　</body>

　　$(function () {

　　$("#send").click(function () {

　　$("#resText").load("test.html .para");

　　});

　　})

　　/**

　　* 筛选载入的HTML文档

　　* load()方法的URL参数的语法结构为："url selector"，注意URL和选择器之间有一个空格

　　* load()方法的传递方式根据参数data来自动指定。

　　* 如果没有参数传递，则采用GET方式进行传递；

　　* 反之，则会自动转换为POST传递

　　* **/

　　</script>

　　</html>

　　load()方法---回调函数

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　<style>

　　* { margin:0; padding:0;}

　　body { font-size:12px;}

　　.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

　　.comment h6 { font-weight:700; font-size:14px;}

　　.para { margin-top:5px; text-indent:2em;background:#DDD;}

　　</style>

　　</head>

　　<body>

　　</body>

　　$(function () {

　　$("#send").click(function () {

　　$("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {

　　alert($(this).html());

　　alert(responseText);//请求返回的内容

　　alert(textStatus);//请求状态：success、error、notmodified、timeout

　　alert(XMLHttpRequest);//XMLHttpRequest对象

　　});

　　})

　　/**

　　* load()方法的回调参数

　　* **/

　　</script>

　　</html>

　　END

　　以上就是本文的全部内容了，希望对大家能有所帮助。

教程首页更多教程