ajax技术原理
众所周知ajax的意思是异步JavaScript和XML(Asynchronous JavaScript and XML)。这项技术的核心就是通过浏览器发出一个异步的HTTP请求来调用服务端的网页或服务。
要使用ajax技术,得创建一个XMLHttpRequest对象。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象,所以为了可以在不同浏览器都可以使用,这个XMLHttpRequest对象得如下面这样创建。
定义XMLHttpRequest对象
<script language="javascript" type="text/javascript">
var xmlhttp ;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
</script>
定义完后就可以向服务器发送请求了
向服务器发出请求
function Query(url)
{
xmlHttp.open("GET", url);第一个参数是请求方法通常是GET或POST,第二个参数是发送的url地址
xmlHttp.onreadystatechange = updateDetails;//完成后要触发的事件
xmlHttp.send(null);
}
实例化updateDetails()函数获取服务器返回的数据
function updateDetails()
{
通过判断xmlHttp.readyState属性来进行不同性况的判断
readyState有五种可能的值:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法。
1 (载入):已经调用open() 方法,但尚未发送请求。
2 (载入完成): 请求已经发送完成。
3 (交互):可以接收到部分响应数据。
4 (完成):已经接收到了全部数据,并且连接已经关闭。
}
以下是一幅从网上下载来的ajax交互原理图
相关文档:
实现功能:单击按钮,将从数据库获取的数据返回给文本框1(刷新文本框1),而文本框2不刷新
页面1:test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head ......
AJAX中文问题分为两大类:
1)发送路径中的参数有中文,在服务器段接收参数值是乱码
例如:
var url="a.jsp?name=小李";
xmlHTTP.open ("post",url,true);
解决办法:
利用javascript的提供的escape()或encodeURI()方法
例如:
客户端:
var url="a.jsp?name=小李";
url=encode ......
环境:Ajax+JSP,Tomcat5.05
参考:http://www.w3cschool.cn/index-24.asp.htm
文件:testAjax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb ......
JavaScript 简单理解Ajax异步调用操作的文章。
文章地址:http://www.soaspx.com/dotnet/ajax/javascript/javascript_20090915_349.html
这篇文章是理解Ajax技术的简单例程,挺简明扼要,很容易理解。
Ajax提供与服务器异步通信的能力,借助于Ajax,可以在用户单击按钮时,使用JavaScript和 DHTML立即更新UI,并向服务器 ......
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<input type="button" onclick="test();" value="提交"/>
<script type="text/javascript">
function test(){
var valid = {
& ......