AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
在网站发展的年代,AJAX发挥越来越重要的作用,以下是鄙人对AJAX的研究,如有错误,还望斧正。PS:以下代码均只在chrome浏览器上测试过 。
普通的JavaScript的AJAX:
AjaxTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
普通的JavaScript的AJAX:
AjaxTest.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=UTF-8">
<title>普通AJAX</title>
<script type="text/javascript">
function showResult()
{
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
var userName = document.getElementById("userName").value;
xmlhttp.open("GET","login?userName="+userName,true);
xmlhttp.send();
}
</script>
</head>
<body>
名字:<input type="text" id="userName" name="userName"/> <input type="button" id="submit" onClick="showResult()" value="发送"/><br/>
返回结果:<div id="result"></div>
</body>
</html>
JQuery的AJAX:
JQueryAjax.html
Extjs的AJAX:
ExtjsAjax.html
用到的Servlet是同一个Servlet:
LoginServlet.java
JQuery的AJAX:
JQueryAjax.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=UTF-8">
<title>JQuery的AJAX</title>
<script src="
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<!-- <script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script> -->
<script>
$(document).ready(function(){
$("#b01").click(function(){
var userName = document.getElementById("userName").value;
$.get("login?userName="+userName,function(data){
$("#result").html(data);
});
});
});
</script>
</head>
<body>
名字:<input type="text" id="userName" name="userName"/> <input type="button" id="b01" value="发送"/><br/>
返回结果:<div id="result"></div>
</body>
</html>
Extjs的AJAX:
ExtjsAjax.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=UTF-8">
<title>Extjs的AJAX</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
Ext.onReady(function () {
Ext.create("Ext.panel.Panel", {
title: 'Extjs测试',
renderTo: 'myPanel',
width: 300,
height: 100,
items: [{
xtype: 'textfield',
id:'userName',
name: 'userName',
fieldLabel: '名字'
}],
buttons:[{
text:'发送',
name: 'b01',
id: 'b01',
handler:login
}]
})
});
function login(){
var userName = Ext.getCmp("userName").value;
Ext.Ajax.request({
url:"login?userName="+userName,
success:function(response,config){
document.getElementById("result").innerHTML=response.responseText;
},
failure: function() {
Ext.MessageBox.alert("result", "请求失败");
}
});
}
</script>
</head>
<body>
<div id="myPanel"></div>
返回结果:<div id="result" ></div>
</body>
</html>
用到的Servlet是同一个Servlet:
LoginServlet.java
package com;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String userName = request.getParameter("userName");
response.getWriter().print(userName);
response.getWriter().close();
}
}
web.xml:
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="
http://www.w3.org/2001/XMLSchema-instance" xmlns="
http://java.sun.com/xml/ns/javaee" xmlns:web="
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="
http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name></display-name>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
普通的JavaScript:
普通的JavaScript:
与其他架构相比,
JavaScript的AJAX的
XmlHttpRequest要自己创建,还要根据返回的
readyState判断是否交接成功,相当直观,不过代码量微多。
JQuery的Ajax:
JQuery,js的架构之一,秉承“write less and do more”的精神,页面相当简单,容易上手,但对数据集操作有点力不从心。
Extjs的Ajax:
这也是js的架构之一,代码量不少,主要用在UI身上,属于重量级,要先学习,搞的很明白不容易。
参考资料: http://www.w3school.com.cn ;
JQuery的Ajax:
JQuery,js的架构之一,秉承“write less and do more”的精神,页面相当简单,容易上手,但对数据集操作有点力不从心。
Extjs的Ajax:
这也是js的架构之一,代码量不少,主要用在UI身上,属于重量级,要先学习,搞的很明白不容易。
参考资料: http://www.w3school.com.cn ;