您的位置：首页 > Web前端 > JavaScript

Ajax异步请求

2016-10-13 16:40 253 查看

1. 简介

根据百度百科的解释，ajax全称“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种创建交互式网页的网页开发技术。通过后台与服务器交互进行少量的数据交互，来使网页局部和服务器交互，而不用刷新整个页面。传统的网页中，如果需要刷新页面任何一个地方，就需要刷新整个页面。

ajax的优点：

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

JavaScript ，XML， HTML， CSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

AJAX应用的例子：

1. 在搜索中，我们输入关键字时，网页会实时展现搜索结果；这是用AJAX实现的。

2. 使用地图时，地图会根据用户显示的位置不停的更新。这也是通过AJAX实现。

3. 注册时候，实时监测提示用户名时候被注册。

2. ajax的模式

ajax的模式主要是通过在网页前端使用核心对象XMLHttprequest来向后台服务器发起请求，后台响应给前端（txt，xml），这样一来，所有请求的内容和响应的处理都可以在前端使用javascript来处理。

根据ajax的名称可以看出，在ajax中主要使用到的技术有javascript和xml，其实ajax不是一种新技术，而是- 几种技术的组合。主要是：

使用DOM进行动态显示和交互

使用XMLHttpRequest进行数据交换和相关操作

使用javascript将所有内容绑定在一起

3. 请求和响应

ajax中，有一个核心对象XMLHttpRequest，在javascript中使用这个对象来和后台服务器交互达到异步请求的目的；

创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。为了兼容性，使用如下的方式创建XMLHttpRequest对象，虽然IE的创建方式不同，但是XMLHttpRequest在IE中的实现和其他浏览器是一样，使用也一样：

var xmlhttp;
if (window.XMLHttpRequest)
{
// for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


请求

将请求发送到服务器，使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。

参数：

method：请求的类型；GET 或 POST。与POST相比，GET更快，但是在发送大量数据和为避免用户输入的内容而出现乱码的情况下，使用POST更好。使用post的时候，需要设置请求头xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

url：请求的url，文件在服务器上的地址或者Servlet等处理程序的url

async：true（异步）或 false（同步）

send(String) 将请求发送到服务器。

参数：

string：仅用于 POST 请求

同步与异步请求：

对于web应用来说，使用ajax的目的就是为了异步请求，所以一般使用异步请求，在响应返回的时候，javascript并不会停止执行，而是继续去处理其他的任务或者脚本，当响应就绪后再对其进行处理。

需要注意的是，使用同步请求的时候，需要在指定响应就绪后的处理，也就是说onreadystatechange处于就绪状态（readyState为4）时候的处理函数。

响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据。

4. 请求的状态readyState

XMLHttpRequest对象有三个重要的属性

1. onreadystatechange。是一个事件函数，每当readyState改变的时候，就会调用这个函数。

readyState。XMLHttpRequest的状态信息，也就是说请求的状态信息，一共有五种状态：

0请求未初始化

1服务器连接已建立

2请求已接收

3请求处理中

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

status

200: “OK”

404: 未找到页面

5. HelloWorld

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Ajax helloworld</title>

<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
//1.创建xmlhttpRequest对象
var request = new XMLHttpRequest();
//创建方法参数
var methoad = "GET";
//创建url参数
var url = this.href;

// 2. 调用XMLHttpRequest的open方法。

request.open(methoad, url, true);

// 2.调用XMLHttpRequest的send方法

request.send(null);

// 3.为XMLHttpRequest添加onreadystatechange事件

request.onreadystatechange = function() {
//请求已经完成
if(request.readyState == 4) {
//并且请求可用
if(request.status == 200) {
document.getElementById("p").firstChild.nodeValue = request.responseText;
//var para = document.createElement("p");
//var node = document.createTextNode(request.responseText);
//para.appendChild(node);
//document.getElementById("p").appendChild(para);
}
}
} //取消点击链接的默认事件
return false;
}
}
</script>
</head>

<body>
<p> 点击链接后异步请求服务器上的hello.txt文件，显示在下方，不刷页面</p>
<a href="hello.txt">AAAAA</a>
<hr />
<div id="p">
<p></p>
</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax javascript 异步
相关文章推荐
新的分享
章节导航