首页 > Web开发 > 详细

Ajax学习心得----必须掌握

时间:2021-01-05 20:49:41      阅读:38      评论:0      收藏:0      [点我收藏+]

1、什么是AJAX
      AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)。
      AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新部分网页的技术。
     通过AJAX,javascript无需等待服务器的响应,而是在等待服务器时执行其他脚本,并当响应就绪后对响应进行处理。
     记住,javascript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
2、AJAX XHR
     XMLHttpRequest是AJAX的基础。

2.1、创建XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象,语法为:
variable=new XMLHttpRequest();
IE5和IE6使用ActiveXObject,语法为:
variable=new ActiveXObject("Microsoft.XMLHTTP");
综上,创建XMLHttpRequest对象的完整代码为:
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest对象用于和服务器交换数据。
2.2、向服务器发送请求
使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","test1.txt",true);
//规定请求的类型,URL以及是否异步处理请求
//请求的类型:GET or POST
//文件在服务器上的位置
//异步(true)或同步(false)
xmlhttp.send();
//将请求发送到服务器
//send(string)仅用于POST请求
大部分情况使用GET;
以下情况使用POST:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据量限制)
发送包含未知字符的用户输入时,POST比GET更稳定也更可靠。
2.2.1、GET请求
最简单的就是xmlhttp.open("GET","demo_get.asp",true);
为避免缓存,也可在url里加入唯一的id,即
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
另外,如果希望通过GET发送消息,要向url添加信息,即
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
2.2.2、 POST请求
最简单的同样是xmlhttp.open("POST","demo_post.asp",true);
另外,如果需要像html表单那样post数据,要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据,即:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
其中,setRequestHeader(header,value)方法用于向请求中添加http头,header规定头的名称,value规定头的值。

2.2.3、URL
url是服务器上文件的地址,并可以是任何类型的文件。
2.2.4、异步or同步
当Async=true(异步)时,规定在响应处于onreadystatechange事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
不推荐,但对于一些小型的请求也是可以的。----当Async=false(同步)时,就不需要编写onreadystatechange函数,把函数放到send后面即可。
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
2.3、服务器响应

responseText属性返回字符串形式的响应:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML属性返回XML形式的响应:

xmlDoc=xmlhttp.responseXML;

2.4、onreadystatechange事件

XHR对象有三个重要的属性:

onreadystatechange  存储函数(或函数名),每当readyState属性改变时,就会调用该函数。

readyState       存有XHR的状态。从0到4变化。

            0:请求未初始化

            1:服务器连接已建立

            2:请求已接收

            3:请求处理中

            4:请求已完成,且响应已就绪。

status         200:“OK”

            404:未找到页面

当readyState等于4且status等于200时,表示响应已就绪。

注意:callback(回调)函数---当你的网站上存在多个AJAX任务,那么就应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数。

 1 <script>
 2 var xmlhttp;
 3 function loadXMLDoc(url,cfunc)
 4 {
 5 if (window.XMLHttpRequest)
 6 {// code for IE7+, Firefox, Chrome, Opera, Safari
 7 xmlhttp=new XMLHttpRequest();
 8 }
 9 else
10 {// code for IE6, IE5
11 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
12 }
13 xmlhttp.onreadystatechange=cfunc;
14 xmlhttp.open("GET",url,true);
15 xmlhttp.send();
16 }
17 function myFunction()
18 {
19 loadXMLDoc("/ajax/test1.txt",function()
20 {
21 if (xmlhttp.readyState==4 && xmlhttp.status==200)
22 {
23 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
24 }
25 });
26 }
27 </script>

 

Ajax学习心得----必须掌握

原文:https://www.cnblogs.com/sunyaning/p/14237718.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!