秃头油腻胖子的进阶之路Ajax篇(上)

robb_zzzzzzz

W3C学习笔记(谁说抄不是笔记?)

Ajax基础

Ajax教程

Ajax=Asynchronous JavaScript and XML(异步的JavaScript和XML)。
Ajax不是新的编程语言,而是一种使用现有标准的新方法
Ajax是与服务器交换数据并更新部分网页的艺术(???),在不重新加载整个页面的情况下。

Ajax简介

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。


学习之前,应该要对下面的知识有基本的了解

  • HTML/XHTML
  • CSS
  • JavaScript/DOM
    • *

什么事Ajax?
Ajax=异步javascript和xml。
Ajax事一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意外这可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不适用Ajax)如果需要更新内容,必须更新整个网页面。
有很多使用Ajax的应用程序案例:Google地图,弹幕等。


Ajax实例

案例参见https://www.w3school.com.cn/a...


Ajax实例解释:
上面的Ajax应用程序包含一个div和一个按钮。
div部分用于显示来自服务器的信息,当按钮被点击时,它负责调用名为loadXMLDoc()的函数,注意这是需要写在<body>中的页面显示部分:

<body>
    <div id="myDiv"><h3>Let Ajax change this text</h3></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>

接下来就是需要在head部分添加一个script标签:

<head>
<script type="text/javascript">
function loadXMLDoc(){
}
</script>
</head>

Ajax XHR

XHR创建对象

XMLHttpRequest是Ajax的基础


XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6是用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整个页面的情况下,对网页的某部分进行更新。


创建XMLHttpRequest对象

所有浏览器(IE7+,FireFox,Chrome,Safari以及Opera)均内奸XMLHttpRequest对象

创建XMLHttpRequest对象的语法:

variable=new XMLHttpRequest();

Ajax请求

XMLHttpRequest对象用于和服务器交换数据

向服务器发送请求

如需讲请求发送带服务器,我们使用XMLHttpRequest对象的open()和send()方法:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法描述
open(method,url,async)规定请求的类型、URL以及是否异步处理请求。 1.method:请求的类型;GET和POST。 2.URL:文件在服务器上的位置 3.async:true(异步)或false(同步)
send(String)将请求发送到服务器。 string:仅用于POST请求

GET还是POST?
与POST相比,GET相对更简单,也更快,并且在大部分情况下都能用,然后在一下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 像服务器发送大量数据(POST没有数据量限制)
  • 发送包含未知字符的用户输入时,POST比GET更文件也更可靠
    • *

GET请求
一个简单的GET请求:

xhr.open("GET","demo_get.asp",true);
xhr.send();

如果希望通过GET方法发送信息,可以再添加:

xhr.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xhr.send();

POST请求
一个简单的POST请求:

xhr.open("POST","demo_post.asp",true);
xhr.send();

如果需要像HTML表单那样POST数据,可以使用setRequestHeader()来添加HTTP头。然后在send方法中规定你希望发送的数据:

xhr.open("POST","demo_post.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Bill&lname=Gates");
方法描述
setRequestHeader(_header_,_value_)向请求添加HTTP头。 hearder:规定头的名称 value:规定头的值~~~~

url-服务器上的文件
open()方法的url参数是服务器上文件的地址:

xmlhttp.open("GET","ajax_test.asp",true);

该文件可以是任何类型的文件,比如:.txt和.xml,或者服务器脚本文件,比如:.asp和.php(在传回相应之前,能够在服务器上执行任务)。


异步:Async=true
当使用async=true时,就需要规定相应处于onreadystatechange时间中的就绪状态时执行的函数:

xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){ document.getElementById("myDiv").innerHTML=xhr.responseText;
        }
 }
 xhr.open("GET","test1.txt",true);

同步:Async=false
如果使用async=false,需要在open()方法中的第三个参数修改为false,W3C不推荐使用这个,但是对于小请求,也是可以的。请记住,javascript会等到服务器相应就绪才继续执行,如果服务器繁忙或缓慢,应用程序会被挂起或停止

XHR响应

服务器相应
如需获得来自服务器的相应,就需要XMLHttpRequest对象的responseText或responseXML属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

responseText属性
responseText属性返回字符串形式的响应,写法为:

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

responseXML属性
如果来自服务器的响应是XML,并且需要作为XML对象进行解析,就需要使用 responseXML,例如:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("SHIT");
for(i=0;i<x.length;i++){
    txt=txt+x[i].childNodes[0].nodeValue+"<br/>";
    }
document.getElementById("myDiv").innerHTML=txt;    

XHR readyState

onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些急于响应的任务。每当readState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性:

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有XMLHttpRequest 的状态。从 0 到 4 发生变化。 0:请求未初始化。1:服务器连接已建立。2:请求已接收。3:请求处理中。4:请求已完成,切响应已就绪
status200:"OK" 400:未找到页面

在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时执行的任务。当readyState等于4时切状态为200时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
阅读 664

愿趁东风,归于玄黄

1 声望
2 粉丝
0 条评论

愿趁东风,归于玄黄

1 声望
2 粉丝
文章目录
宣传栏