AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示:如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
//demo_~为外部文件,路径要确保正确
$("#div1").load("demo_test.txt #p1");可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容statusTXT - 包含调用的状态xhr - 包含 XMLHttpRequest 对象下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:
#index.html
<!DOCTYPE html><html lang="zh">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script> <title>Document</title> </head>
<body> <div id="div1"> <h2>使用 jQuery AJAX 来改变文本</h2></div> <button>获得外部内容</button> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { //检查路径是否正确,此处例子为引入外部文件$("#div1").load("value.json", function(responseTxt/*请求成功返回文体*/, statusTxt, xhr) {
//如果不传参数的话下面的参数名都是未知的 if(statusTxt == "success") alert("外部内容加载成功!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); }); }); </script> </body>
</html>
#value.json
{ "name": "中国", "provinces": [ {"id":"6528","name": "巴音郭楞", "value": 14149}, {"id":"6532","name": "和田", "value": 2226.41}, {"id":"6522","name": "哈密", "value": 1544.94}, {"id":"6529","name": "阿克苏", "value": 3720.24}, {"id":"6543","name": "阿勒泰", "value": 2771.96}, {"id":"6531","name": "喀什", "value": 6263.69}, {"id":"6542","name": "塔城", "value": 4494.77}, {"id":"6523","name": "昌吉", "value": 3835.48}, {"id":"6530","name": "克孜勒苏", "value": 5493.23}, {"id":"6521","name": "吐鲁番", "value": 12299.72}, {"id":"6540","name": "伊犁", "value": 14151.74}, {"id":"6527","name": "博尔塔拉", "value": 1562.67}, {"id":"6502","name": "克拉玛依", "value": 14225.67}, {"id":"6501","name": "乌鲁木齐", "value": 384.73} ]}
ps:
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数描述jQuery.ajax()执行异步 HTTP (Ajax) 请求。.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxError()当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSend()在 Ajax 请求发送之前显示一条消息。jQuery.ajaxSetup()设置将来的 Ajax 请求的默认值。.ajaxStart()当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxStop()当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSuccess()当 Ajax 请求成功完成时显示一条消息。jQuery.get()使用 HTTP GET 请求从服务器加载数据。jQuery.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码数据。jQuery.getScript()使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。.load()从服务器加载数据,然后把返回到 HTML 放入匹配元素。jQuery.param()创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。jQuery.post()使用 HTTP POST 请求从服务器加载数据。.serialize()将表单内容序列化为字符串。.serializeArray()序列化表单元素,返回 JSON 数据结构数据。转载于:https://www.cnblogs.com/huchong-bk/p/11377971.html
