普通javascript的，jquery的，Extjs的ajax实现与比较

来源：互联网发布：空天地一体化网络编辑：程序博客网时间：2024/05/13 18:23

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">

<html>

<head>

<title>普通AJAX</title>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>JQuery的AJAX</title>

</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>

<title>Extjs的AJAX</title>

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="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：

<?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/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

<display-name></display-name>

<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的AJAX的 XmlHttpRequest要自己创建，还要根据返回的readyState判断是否交接成功，相当直观，不过代码量微多。
JQuery的Ajax:
JQuery,js的架构之一，秉承“write less and do more”的精神，页面相当简单，容易上手，但对数据集操作有点力不从心。
Extjs的Ajax：
这也是js的架构之一，代码量不少，主要用在UI身上，属于重量级，要先学习，搞的很明白不容易。

参考资料：http://www.w3school.com.cn ;