为什么要使用Ajax呢,使用表单提交不是很好吗?
所以我们得先说说两者的区别?
普通的表单提交,页面会发生跳转,最简单的例子就是登录,比如""开源中国社区"的登录:
输入登录邮箱和登录密码,点击[现在登录]就会发生页面的跳转,进入到了如下页面:
如果是Ajax呢?
当我在"用户名"输入框输入"whuang"时,它提示我"此用户名已被注册，请另换一个",它是怎么知道我已经注册过"whuang"呢?因为它请求了一次服务器,但是界面却没有跳转.
而我登录的时候,请求了服务器,界面发生了跳转,这就是两者的区别.
说的让人听不懂一些,普通的请求是同步的,而Ajax是异步的.
为什么要使用Ajax?
因为用户体验,跳转的用户体验是很差的,屏幕会闪一下,而且填写的信息容易丢失.而使用Ajax的话,页面不跳转,之前填写的信息也都在.
那么如何实现Ajax呢?
以我两年前做的一个考试系统为例.
在管理员界面有一个全局设置页面,如下:
点击[生效]按钮,会请求服务器,但是页面不会发生跳转.比如在"试卷总分"输入框输入50,然后点击[生效]按钮
确实请求了服务器,我们可以看下后台的打印信息:
全局设置页面(globalSettings.jsp)代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="com.kingbase.web.util.ExamUtil"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/Ajax.js" ></script>
<script type="text/javascript" src="js/Module.js" ></script>
<script type="text/javascript" src="js/common_util.js" ></script>
<link href="css/main.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
window.onload=function(){
var sizePerPage=document.forms[0].size_per_page;
//exam_sum_score.value="";
var abc44=function (obj) {
//alert(obj);
if(obj!='no'){
arr=obj.split("::");//obj="yes::0::0::2::fadf::"
sizePerPage.value=arr[1];
var examSumScore=document.forms[0].exam_sum_score;
examSumScore.value=arr[2];
showExamSwitch(arr[3]);
if(arr[4]!='null'){
loadInstruction(arr[4]);
}
}
};
var url2="<%=basePath%>/ViewWholeVariableServlet";
//alert(url2);
var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);
xmlhw5.XMLGetMethod();
/****************** set exam switch start ********************/
//showExamSwitch();
/****************** set exam switch end ********************/
//loadInstruction();
//var examInstructionContent=document.forms[0].examInstructionContent;
//examInstructionContent.disabled="disabled";
//examInstructionContent.readOnly="readonly";
};
function showExamSwitch(exam_switch){
var isExamTime=document.forms[0].isExamTime;
com.whuang.hsj.setCheckedRadioByValue(isExamTime,exam_switch);
}
function setExamInstruction(){
//var examInstructionBtn=document.forms[0].examInstructionBtn;
var examInstructionContent=document.forms[0].examInstructionContent;
if(com.whuang.hsj.isReadOnly(examInstructionContent)){
alert("请先编辑，再提交修改!");
return ;
}
abc4=function (obj) {
alert("修改成功!");
};
var url2="AddExamInstructionServlet";
var args3="isEdit=2&content="+examInstructionContent.value;
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
xmlhw5.XMLPostMethod();
examInstructionContent.readOnly=true;
examInstructionContent.disabled="disabled";
};
function loadInstruction(exam_instru){
//var editInstructionContentBtn=document.forms[0].editInstructionContentBtn;
var examInstructionContent=document.forms[0].examInstructionContent;
examInstructionContent.readOnly=true;
examInstructionContent.disabled="disabled";
examInstructionContent.value =exam_instru;
//examInstructionContent.disabled=false;
}
function shutdownExam(){
//var shudownBtn=document.forms[0].shudownBtn;
var isExamTime=document.forms[0].isExamTime;
var value23=com.whuang.hsj.getRadioValue(isExamTime);
abc4=function (obj) {
alert("修改成功!");
};
var url2="SetExamSwitchServlet";
var args3="isExamTime="+value23;
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
//alert(resultArray.result);
xmlhw5.XMLPostMethod();
}
function setPageSize(){
alert("该功能暂未实现.");
};
function setExamSumScore(){
//var setExamScoreBtn=document.forms[0].setExamScoreBtn;
var exam_sum_score=document.forms[0].exam_sum_score;
abc4=function (obj) {
alert("修改成功!");
};
var url2="SetExamSumScoreServlet";
var args3="examSumScore="+exam_sum_score.value;
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
xmlhw5.XMLPostMethod();
}
function setPageSize(){
var sizePerPage=document.forms[0].size_per_page;
abc4=function (obj) {
alert("修改成功!");
};
var url2="<%=basePath%>/SetSizePerPageServlet";
var args3="sizePerPage="+sizePerPage.value;
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
xmlhw5.XMLPostMethod();
}
function viewInstruction(){
var examInstructionContent=document.forms[0].examInstructionContent;
abc4=function (obj) {
examInstructionContent.value=obj;
examInstructionContent.disabled="disabled";
examInstructionContent.readOnly=true;
};
var url2="AddExamInstructionServlet";
var args3="isEdit=1";
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
xmlhw5.XMLPostMethod();
}
function editInstruction(){
var examInstructionContent=document.forms[0].examInstructionContent;
examInstructionContent.readOnly=false;
examInstructionContent.disabled="";
}
</script>
</head>
<body>
<center>
<h1>全局设置</h1><a class="hyperlink" href="javascript:location.reload();" >刷新</a>
<form action="">
<table border="1" >
<tr><td>每页显示条数</td><td><input type="text" name="size_per_page" > </td><td><input type="button" value="生效" onclick="setPageSize();" > </td> </tr>
<tr><td>试卷总分</td><td><input type="text" name="exam_sum_score" > </td><td><input type="button" name="setExamScoreBtn" value="生效" onclick="setExamSumScore();" > </td> </tr>
<tr><td>是否打开考试功能</td><td><input name="isExamTime" type="radio" value="1" checked="checked" >打开 <input type="radio" name="isExamTime" value="2" >关闭 </td><td><input type="button" name="shudownBtn" onclick="shutdownExam();" value="生效" > </td> </tr>
<tr><td rowspan="2">考试说明</td><td colspan="2" ><textarea cols="50" readonly="readonly" rows="10" name="examInstructionContent" ></textarea> </td></tr>
<tr > <td colspan="2" ><input name="editInstructionContentBtn" onclick="editInstruction();" type="button" value="编辑" >
<input name="viewInstructionContentBtn" onclick="viewInstruction();" type="button" value="取消" >
<input type="button" value="提交修改" name="examInstructionBtn" onclick="setExamInstruction();" > </td> </tr>
</table>
</form>
</center>
</body>
</html>
详细讲解如下
刚才我点击[生效]触发的方法如下:
function setExamSumScore(){
//var setExamScoreBtn=document.forms[0].setExamScoreBtn;
var exam_sum_score=document.forms[0].exam_sum_score;
abc4=function (obj) {
alert("修改成功!");
};
var url2="SetExamSumScoreServlet";
var args3="examSumScore="+exam_sum_score.value;
var xmlhw5=new XMLHttpHuangWei(url2, args3,abc4);
xmlhw5.XMLPostMethod();
}
XMLHttpHuangWei 有三个参数,第一个参数是请求的服务器地址(接口地址),第二个参数是请求的参数,第三个参数是回调函数(回调方法).使用XMLHttpHuangWei需要引入如下文件Ajax.js,
XMLHttpHuangWei有两个方法XMLPostMethod(post方式请求) 和XMLGetMethod(get方式请求),
给一个get方式 请求的例子:
var abc44=function (obj) {
if(obj!='no'){
arr=obj.split("::");//obj="yes::0::0::2::fadf::"
sizePerPage.value=arr[1];
var examSumScore=document.forms[0].exam_sum_score;
examSumScore.value=arr[2];
showExamSwitch(arr[3]);
if(arr[4]!='null'){
loadInstruction(arr[4]);
}
}
};
var url2="<%=basePath%>/ViewWholeVariableServlet?name=whuang";
var xmlhw5=new XMLHttpHuangWei(url2, null,abc44);
xmlhw5.XMLGetMethod();
Ajax.js源代码如下
// return parameter
var xhr =null;
var ii=0;
var getXHR=null;
var objectXHR=null;
var responseMethod222222222111221;
var browser=navigator.appName;
var isIE=(browser=="Microsoft Internet Explorer");
var createXHR=function() {
var xhr;
try {
xhr =xhr = new XMLHttpRequest();
return xhr;
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
} catch (ee) {
xhr = false;
}
}
if (!xhr && typeof XMLHttpRequest != 'undefined') {
new ActiveXObject("Msxml2.XMLHTTP");
return xhr;
}
};
var onreadystatechangeMethod = function() {
var copyObj=document.getElementById("copy");
var obj = objectXHR;//
var isExist=(null!=copyObj);
if (obj.readyState == 0) {
if(isExist)
copyObj.innerHTML = "Sending Request...";
}
if (obj.readyState == 1) {
if(isExist)
copyObj.innerHTML = "Loading Response...";
}
if (obj.readyState == 2) {
if(isExist)
copyObj.innerHTML = "Response Loaded...";
}
if (obj.readyState == 3) {
if(isExist)
copyObj.innerHTML = "Response Ready...";
}
if (obj.readyState == 4) {
if (obj.status == 200) {
//alert("this : "+this);//this direct to window
if(isExist)
copyObj.innerHTML = "Response Complete...";
window.flag = true;
var response = obj.responseText;
//resultArray.result=response;
if (!(responseMethod222222222111221 == null || responseMethod222222222111221 == undefined)) {
responseMethod222222222111221(response);
//alert(response+": "+(ii++));
}
// this.result.push(response);
// alert("xmlhw.result:"+xmlhw.result);
} else if (obj.status == 404) {
alert(404);
if(null!=copyObj)
copyObj.innerHTML = "File not found";
} else {
if(null!=copyObj)
copyObj.innerHTML = "There was a problem retrieving the XML.";
}
}
};
objectXHR=createXHR();
function XMLHttpHuangWei(url, arges, responseMethod2) {
//objectXHR=;
responseMethod222222222111221=responseMethod2;
objectXHR=createXHR();
//alert(this.xhr1);
this.url = url;
argObject = new Object();
argObject.arg = arges;
this.argesArray = argObject;
this.method = responseMethod222222222111221;
this.result = new Array();
getXHR=function(){
return window.objectXHR;
//return createXHR();
};
this.XMLGetMethod = function() {
getXHR().onreadystatechange = onreadystatechangeMethod;
var args23="";
if(this.argesArray.arg!=null&&this.argesArray.arg!=""){
args23=this.argesArray.arg+"&";
}
getXHR().open("GET", this.url + '?' + args23+"timestamp=" + (new Date()).getTime()+"&isIE="+isIE , true);
getXHR().send(null);
};
this.XMLPostMethod = function() {// xmlObj
// alert("responseMethod:\n"+responseMethod);
// alert("method:\n"+this.method);
getXHR().onreadystatechange = onreadystatechangeMethod;
getXHR().open("POST", this.url, true);
getXHR().setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
getXHR().send(this.argesArray.arg);
// alert(this.argesArray.arg);
//
};
}
相关推荐
### 二、为什么要使用 AJAX 拦截器？ 1. **全局错误处理**：通过拦截器，可以方便地为所有 AJAX 请求添加统一的错误处理机制，避免因为每个请求都需要单独处理异常而产生的冗余代码。 2. **请求和响应增强**：可以...
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
**为什么要使用Ajax** 1. **提升用户体验**：Ajax允许用户在不离开当前页面的情况下进行交互，比如搜索时的自动补全功能，这提供了更丰富的用户体验，使用户能够连续地进行操作而无需等待页面刷新。 2. **无刷新...
首先，为什么要使用Ajax框架？主要原因是手动编写Ajax代码存在一些缺点。当开发人员不使用框架时，他们需要重复编写大量的JavaScript代码，这不仅工作量大，还容易出错。此外，不同的浏览器对Ajax的支持程度不一，...
在.NET环境中使用Ajax技术可以极大地提升Web应用的用户体验，因为它允许数据在后台异步更新，无需刷新整个页面。Ajax（Asynchronous JavaScript and XML）的核心在于使用JavaScript与服务器进行交互，结合XML或JSON...
1. 在View文件中引入jquery库：在用户界面中使用Ajax技术，通常需要借助JavaScript库来简化AJAX请求的编写。在CakePHP中，推荐使用jQuery库，因此需要在用户界面文件（如user_normal.ctp）中引入jquery库的脚本文件...
对于 POST 请求，只需将 `type` 设置为 `'POST'`，并在 `data` 参数中提供要发送的数据。 在 ASP.NET 中，服务器端通常会有一个接收 AJAX 请求的页面或 Web 方法。这个方法可能在 ASPX 页面中定义，或者在代码-...
很不错的Ajax开发草考文档，方便快捷1. AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受...5. 使用AJAX制作留言本使用已有的AJAX教程，制作一个属于自己的留言本吧....
本教程以一个简单的Ajax使用示例为基础，帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript向服务器发送HTTP请求，并接收...
这个例子展示了如何使用Ajax获取服务器上的当前时间，并实时更新到网页上。用户可以看到时间每隔几秒就会自动更新，而页面其他部分保持不变。实现这一功能的关键代码是创建XMLHttpRequest对象，然后设置HTTP请求...
**AjaxRequest(Ajax使用包)** Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包，它...
在"AjaxShow"案例中，可能会包含一个简单的网页，该网页使用Ajax技术向服务器请求数据，然后动态地在页面上显示这些数据。这可能是通过点击按钮、输入框改变或其他用户交互触发的。案例可能还会涉及错误处理、数据...
使用AJAXCache插件，开发者可以自定义哪些AJAX请求应该被缓存，以及缓存的生命周期。例如，对于那些不常改变的数据，如站点配置信息或者静态内容，设置较长的缓存时间是有益的。而对于实时性要求高的数据，如股票...
在“使用Ajax取得数据”这个主题中，我们将深入探讨Ajax的工作原理、基本使用方法以及实际应用。 ### 1. Ajax工作原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript在后台与服务器交换数据，而...
- 使用Ajax时，要注意防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全问题。 - 由于Ajax请求通常是异步的，所以需要确保在服务器端进行适当的验证和授权。 7. **优化与调试**： - 使用`indicator`属性显示...
6. **性能优化**：通过缓存、分页、懒加载等方式优化AJAX请求，减少不必要的网络负载，提升用户体验。 7. **兼容性考虑**：对于老版本的浏览器，可能不支持XMLHttpRequest或新的JavaScript特性，因此需要使用...
传统的门户操作往往涉及到整个页面的刷新，而使用Ajax，可以只更新页面中需要变动的部分，减少了不必要的数据传输，提高了响应速度。例如，当用户在门户页面上点击链接或者触发某个操作时，Ajax可以通过调用后台的...
ajax与jq的使用方法及什么时候使用，ajax的特点及运行原理
然后，使用AJAX技术发送POST请求到服务器，并将服务器返回的数据展示在页面上。最后，通过设置进度条的值，可以控制进度条的长度，提高用户体验。 Bootstrap进度条与AJAX后端数据传递结合使用可以实现在页面不刷新...
要在Asp.NET项目中使用Ajax功能，首先需要确保项目引用了必要的DLL文件。在本例中，我们需要在项目的BIN目录下放置System.Web.Extensions.dll和可能的其他依赖DLL。然后，在解决方案资源管理器中右键点击“引用”...