Ajax

Posted beotat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。

                          Ajax
Ajax 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax = 异步 javascript + XML。
Ajax 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。


     Ajax 用于创造动态性更强的应用程序
     Ajax 可用来与数据库进行动态通信
     Ajax 可用来与 XML 文件进行交互通信
     创建 XMLHttpRequest 对象
     XMLHttpRequest 是 Ajax 的基础。
     XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

技术图片

语法:variable = new XMLHttpRequest();

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject。

var xmlhttp;
if( window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft XMLHttp");
}
Ajax——向服务器发送请求
如需将请求发送至服务器,使用 XMLHttpRequest 对象的 open()和send()方法:

xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();


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

method:请求的类型;GET 或 POST
url:文件在服务器上的位置
(该文件可以是任何类型的文件,比如 .txt 和 .xml;或者服务器脚本文件,比如 .asp 和 .php(在传回响应之前,能够在服务器上执行任务))
async:true(异步)或 false(同步)
send(string) :将请求发送到服务器

string:仅用于 POST 请求
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
为了得到的是缓存的结果,请向 URL 添加一个唯一的 ID。
如果希望通过 GET 方法发送消息,请向 URL 添加信息。

如果需要像 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:规定头的值
异步—— True or false?
通过 Ajax,JavaScript 无需等待服务器的响应,而是:

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或者缓慢,应用程序会挂起或停止。
当使用 async = false 时,请不要编写onreadystatechange函数——把代码放到send()语句后面即可。

用 JavaScript 写一个完整的 Ajax 代码并不复杂,但是需要注意:Ajax请求是异步执行的。

服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText:获得字符串形式的响应数据

如果来自服务器的响应并非 XML -> 使用 responseText 属性
responseText 属性返回字符串形式的响应
responseXML:获得 XML 形式的响应数据

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析 -> 使用 responseXML 属性。
Ajax—— onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个属性:

onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从0 到 4发生变化
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status:200:“OK”;404:未找到页面
在 onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于4且状态为200时,表示响应已就绪。
onreadystatechange 事件被触发5次(0~4),对应着 readyState 的每个变化。

使用 callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果你的网站上存在多个 Ajax 任务,那么你应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 Ajax 任务调用该函数。
该函数调用应包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)。

function myFunction() {
loadXMLDoc("ajax-info.txt", function() {
if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}

JQuery Ajax - ajax()方法
实例
$(document).ready(function() {
$("#b01").click( function() {
htmlobj = $.ajax({ url:" /jquery/test1.txt", async: false});
$("#myDiv").html(html(htmlobj.responseText);
});
});
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Context</button>
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 Ajax 实现。简单易用的高层实现见 $.get,$.post等。

$.ajax()返回其创建 的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax()可以不带任何参数直接使用。

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学 Web 之 AjaxAjax 概述,快速上手

AJAX

Ajax及跨域

Django的日常-AJAX

jQuery中的Ajax以及请求函数

Ajax