初步了解Ajax

- 日理万妓 2022-09-28 11:45 223阅读 0赞

以下参考部分菜鸟驿站以及W3school

Ajax是一种让网页的响应更快的技术，因为它允许异步地向服务器发送请求，而不需要重新载入页面，使用Ajax来提升用户体验。

Ajax=Asynchronous JavaScript and XML （异步JavaScript和XML）

Ajax不是新的编程语言，而是一种使用了现有标准的新方法。它最大的优点在于不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。Ajax是不需要任何浏览器插件，但是需要用户允许JavaScript在浏览器上执行。

1.Ajax工作原理

在浏览器中，有一个事件发生了，然后会产生一个XMLHttpRequest 对象，然后发送HttpRequest到服务器，处理HTTPRequest请求，创建一个响应然后把数据传送到浏览器中，浏览器中用JavaScript处理从服务器中返回来的数据，之后就更新部分数据。

XMLHttpRequest对象（异步的与服务器交换数据），JavaScript/DOM(信息显示/交互)，CSS（给数据定义样式），XML（作为转换数据的格式），Ajax应用程序与浏览器和平台无关的。

所有的现代浏览器都是支持XMLHttpRequest对象的（IE5 IE6）使用的是ActiveXObject.

XMLHttpRequest是用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.创建XMLHttpRequest对象，所有的现代浏览器(IE7+,Firefox,Chrome,Safari以及Opera)内均建XMLRequest对象。

那创建的语法是var=new XMLHttpRequest();

而IE 5 IE6就要这样子创建： var=new ActiveXObject("Microsoft.XMLHTTP");

为了保证可以在所有的浏览器中运行，我们一般都要对他们进行创建，如果不支持的话，那么我们就创建ActiveXObject;

有关的代码是：

var xmlhttp;  
if(window.XMLHttpRequest)\{  
xmlhttp=new XMLHttpRequest();  
\}  
else\{  
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');  
\}

3.向服务器中发送请求

之前提过，XMLHttpRequest对象是用于和服务器交换数据的，如果我们想要将请求发送到服务器，那么我们就可以使用XMLHttpRequest对象的open()和send()方法：

xmlhttp.open("GET","ajax\_info.txt",true);

xmlhttp.send();

首先我们来介绍一下open()这个方法，从上面可以看到open()中有三个参数的，分别是method,url,asyc，他们分别规定了请求的类型，URL以及是否异步处理请求。一般来说，请求的类型分为GET或者是POST.URL是指文件中服务器上的位置，async是表示是异步还是同步，如果是异步我们就设置为true,如果是同步的话，就设置为false。这里设置为true就是代表我们通过Ajax就可以在等待服务器响应的时候执行其他的脚本，当响应就绪后对响应进行处理，大大利用了资源，提高了网站的性能。

send(string)的方法，send()中其实有一个参数的，但是只用于post请求，但是这里是GET请求，所以没有使用这个参数.

\*\*那我们什么时候用GET，什么时候使用POST呢？

GET其实会更加地简单，并且在大部分情况下我们都可以使用。然而在以下的情况下，我们使用的是POST请求。

1）无法使用缓存文件（更新服务器上的文件或者数据库）

2）向服务器发送大量的数据（POST没有数量上的限制）

3）发送包含未知的字符的用户输入时，POST更加可靠而且也稳定。而get可以直接在url后面添加要传输的数据。而post是则怎样传送数据的呢？

就要使用setRequestHeader()来添加HTTP头，然后在刚刚说过的send()方法中添加string.例如：

xmlhttp.open("POST",url,true);

xmlhttp.setRequestHeader("Content-type"."application/x-www-form-urlencoded");

xmlhttp.send("frame=Henry&lname=Ford");

关于这个url，是指服务器上文件的地址。该文件可以是任何类型的文件，比如是.txt,和.xml，或者服务器脚本文件，比如.asp和.php。

4.服务器响应

如果我们需要获得来自服务器的响应的话，就使用XMLHttpRequest对象的responseText（这个是获得字符串形式的响应数据，如果我们服务器的响应不是来自于XML的话，我们就应该使用这个属性）或者是responseXML（这个是获得XML形式的响应数据）属性。

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

如果我们使用的是responseXML是需要作为XML对象进行解析的。

xmlDoc=xmlhttp.responseXML;

txt="";x=xmlDoc.getElementsByTagName("ARTIST");

for(i=0;i<x.length;i\++)\{

txt=txt \+ x\[i\].childNodes\[0\].nodeValue \+ "<br>";

\}document.getElementById("myDiv").innerHTML=txt;

5.onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性：

属性                                        描述

onreadystatechange               存储函数（或函数名）。每当readyState属性改变的时候，就会调用该函数。

readtState                                存有XMLHttpRequest的状态。从0到4发生变化。

0：请求未初始化。

1：服务器连接已经建立

2：请求已经接收

3：请求处理中

4：请求已经完成，且响应已就绪。

status                                        200:"OK"

404:未找到该页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已经就绪：

xmlhttp.onreadystatechange=function()\{

if(xmlhttp.readyState==4&&xmlhttp.status==200)\{

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

\#\#onreadystatechange事件被触发5次（0-4），对应着readyState的变化。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。如果你的网站中存在多个AJAX任务的话，你应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件执行时的任务（每次调用可能不尽相同）

function myFunction()\{

loadXMLDoc(URL,function()\{      //加载XML文档中的代码可以存储在一个函数中

if(xmlhttp.readyState==4&&xmlhttp.status==200)\{

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

\});

初步了解Ajax

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 javascript初步了解

相关初步了解Ajax

相关 MySql 初步了解

相关 Docker初步了解

相关 Docker初步了解

相关 Docker初步了解

相关 JavaScript、jQuery和Ajax初步了解

相关 TSL初步了解

相关 ajax了解

相关 VueJS初步了解