Ajax知识总结
2015-11-12 11:40
162 查看
Ajax的目的就是让页面“自动”的与后台实现交互。
1、所有的现代浏览器均支持XMLHttpRequest对象。创建XMLHttpRequest用
var xmlRequest=new XMLHttpRequest();
2、服务器请求:
GET请求:
xmlRequest.open("GET","1.servlet",true);
xmlRequest.send();
方法 描述
POST请求:
xmlRequest.open("post","1.servlet",true);
xmlhttp.setRequestHeader("Content-type"."application/***")
xmlhttp.send("hello");
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
例子:
3、服务器的响应:
属性 描述
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4、 XMLHttpRequest 对象的三个重要的属性:
或者,多个myFunction()时应该这样做
jQuery中的Ajax:
从上面可以看出,Ajax只需要了解浏览器与服务器的GET、POST请求,接收服务器的返回消息responseText和responseXML,以及在接收到消息后需要做什么事情readystateonchange既可以了。这些在加jQuery中也有很好的支持。
这是jQuery的语法,只需要这么一句话就完成了上面的请求,接收消息以及接收消息后做什么事情。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
例子:
这是示例文件("demo_test.txt")的内容:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
$("#div1").load("demo_test.txt");//执行后会将demo_test.txt的内容写到class为div1的div中
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
但有时候我们也需要向Ajax中一样对服务器做GET或者是POST请求,此时就需用jQuery的下面方法了。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数是服务器返回的内容,第二个回调参数是请求的状态码。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数是服务器返回的内容,第二个回调参数是请求的状态码。
1、所有的现代浏览器均支持XMLHttpRequest对象。创建XMLHttpRequest用
var xmlRequest=new XMLHttpRequest();
2、服务器请求:
GET请求:
xmlRequest.open("GET","1.servlet",true);
xmlRequest.send();
方法 描述
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器。 string:仅用于 POST 请求 |
xmlRequest.open("post","1.servlet",true);
xmlhttp.setRequestHeader("Content-type"."application/***")
xmlhttp.send("hello");
方法 | 描述 |
---|---|
setRequestHeader(header,value) | 向请求添加 HTTP 头。 header: 规定头的名称 |
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
例子:
<html> <head> <script type="text/javascript"> 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.responseText; } } xmlhttp.open("GET","/ajax/test1.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button> </body> </html>
3、服务器的响应:
属性 描述
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
4、 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
status | 200: "OK" 404: 未找到页面 |
<html> <head> <script type="text/javascript"> 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.responseText; } } xmlhttp.open("GET","/ajax/test1.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button> </body> </html>
或者,多个myFunction()时应该这样做
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { 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=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/ajax/test1.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">通过 AJAX 改变内容</button> </body> </html>
jQuery中的Ajax:
从上面可以看出,Ajax只需要了解浏览器与服务器的GET、POST请求,接收服务器的返回消息responseText和responseXML,以及在接收到消息后需要做什么事情readystateonchange既可以了。这些在加jQuery中也有很好的支持。
这是jQuery的语法,只需要这么一句话就完成了上面的请求,接收消息以及接收消息后做什么事情。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
例子:
这是示例文件("demo_test.txt")的内容:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
$("#div1").load("demo_test.txt");//执行后会将demo_test.txt的内容写到class为div1的div中
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
但有时候我们也需要向Ajax中一样对服务器做GET或者是POST请求,此时就需用jQuery的下面方法了。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数是服务器返回的内容,第二个回调参数是请求的状态码。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数是服务器返回的内容,第二个回调参数是请求的状态码。
相关文章推荐
- ora-00031:session marked for kill处理oracle中杀不掉的锁
- python开发中module模块用法实例分析
- membership 常用的操作
- java.lang.OutOfMemoryError: PermGen space及其解决方法
- 在 Linux 中用 nmcli 命令绑定多块网卡
- 继承、实现、依赖、关联、聚合、组合的联系与区别
- linux -- framebuff驱动总结
- C#学习笔记 lambda表达式
- HDU 4946 (凸包)
- 序列化存档之备忘脚本
- win8.1 64位+oracle11g R2 64位 +powerdesigner破解版 64位+PL/SQL
- 支付宝支付
- jQuery提交Json数据到Webservice,并接收返回的Json数据
- sql_事物,确保多表联动时候的完整性
- java基本集成开发环境搭建
- python 学习笔记(08)
- mvc 基础1-多类型绑定
- 再探oVirt-测试2个节点的ovirt和glusterfs集群的可用性
- iOS项目设置成进入项目手机不会自动锁屏状态
- HDU 2874 Connections between cities 【LCA】