初步了解Ajax

最新推荐文章于 2024-11-18 20:31:57 发布

香柠檬YU

最新推荐文章于 2024-11-18 20:31:57 发布

阅读量352

点赞数

分类专栏： Ajax 文章标签： ajax 异步 xmlhttprequest xml javascript

本文链接：https://blog.csdn.net/sinat_36841379/article/details/61204740

版权

Ajax 专栏收录该内容

1 篇文章 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.服务器响应