Ajax几个简单的案例ajax_用户唯一验证、ajax_返回xml数据的处理包括分页处理

分类：Ajax作者：编程之家用户

Ajax几个简单的案例（ajax_用户唯一验证、ajax_返回xml数据的处理（包括分页处理）

当然开发的前提是把相应的包导入项目中（开发环境myeclipse）

ajax_用户唯一验证(servlet):

如图在myeclipse中的ajax_servlet项目中的index.jsp实现页面的显示：

Index.jsp代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/util.js"></script>

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/user/reg.js"></script>

</head>

<body>

<divalign="center">

<formaction="">

用户名：<inputtype="text"id="uname"/><spanid="cname"></span><br>

密码：<inputtype="password"id="upass"/><br><input

type="submit"value="注册"/>

</form>

</div>

</body>

</html>

然后在webroot下新建一个js文件夹，这个里面写我们的js代码实现ajax使用

在util.js中封装了发送和接收的请求和一些必要的代码

Util.js文件代码：

//通过id获取dom对象

function$(id){

returndocument.getElementById(id);

}

//创建XMLHttpRequest对象

functioncreateXHR(){

//声明

varxhr;

//IE浏览器XMLHTTP组件的名称

varaVertion=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0","Microsoft.XMLHttp"];

try{

//firefoxopera等浏览器

xhr=newXMLHttpRequest();

}catch(ex){

for(vari=0;i<aVertion.lengrh;i++){

try{

xmlHttpRequest=newActiveXObject(aVersion[i]);

returnxmlHttpRequest;

}catch(ex){

continue;

}

}

}

returnxhr;

}

varxhr=createXHR();

functionsendPost(content,url,success,fail){

//ajax处理操作

//创建xhr对象

//触发器

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200||xhr.status==304){

success(xhr);

}else{

fail(xhr);

}

}

};

//打开请求

xhr.open("POST",true);

//设置类型

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//发送请求

xhr.send(content);

}

然后再user下的reg.js中写要完成的代码

Reg.js文件代码：

window.onload=function(){

//获取id="uname"节点对象

varunameDom=$("uname");

//为节点注册onblur事件

unameDom.onblur=function(){

//根据value属性获取穿的的值并且拼成传递的参数

varcontent="name="+unameDom.value;

//封装请求的url路径

varurl="./servlet/regUser.do?time="+newDate().getTime();

sendPost(content,disposeSuccess,disposeFail);

functiondisposeSuccess(){

$("cname").innerHTML=xhr.responseText;

}

functiondisposeFail(){

alert("请求失败");

}

};

};

最后在src下建立action处理方法

UserAction.java文件代码：

packagewww.csdn.net.servlet;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

publicclassUserServletextendsHttpServlet{

/**

*

*/

privatestaticfinallongserialVersionUID=1L;

publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

this.doPost(request,response);

}

publicvoiddoPost(HttpServletRequestrequest,IOException{

Stringname=request.getParameter("name");

System.out.println("===="+name);

response.setContentType("text/html;charset=utf-8");

PrintWriterout=response.getWriter();

if("xiao".equals(name)){

out.print("用户已经存在");//输出文本

}else{

out.print("用户名可以使用");

}

out.flush();

out.close();

}

/**

*Initializationoftheservlet.<br>

*

*@throwsServletExceptionifanerroroccurs

*/

publicvoidinit()throwsServletException{

//Putyourcodehere

}

}

这样就完成了，发布到tomcat服务器上然后用火狐浏览器测试就可以了

ajax_用户唯一验证(struts2)

如图所示；

首先实现页面的代码：

Index.jsp文件代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@tagliburi="/struts-tags"prefix="s"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/util.js"></script>

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/user/reg.js"></script>

</head>

<body>

<divalign="center">

<h3>注册页面</h3>

</div>

<divalign="center">

<s:formaction="regUser"namespace="/csdn"theme="simple">

用户名：<s:textfieldname="usernaem"id="uname"/>

<spanid="cname"></span>

<br>

密码：<s:textfieldname="userpass"id="upass"/>

<br>

邮箱：<s:textfieldname="useremial"id="uemail"/>

<br>

<s:submitvalue="注册"/>

</s:form>

</div>

</body>

</html>

Sc.jsp文件代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@tagliburi="/struts-tags"prefix="s"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/util.js"></script>

<scripttype="text/javascript"

src="${pageContext.request.contextPath}/js/user/reg.js"></script>

</head>

<body>

。。。。。。。。。

</body>

</html>

然后是js文件

Util.js文件代码：

//通过id获取dom对象

function$(id){

returndocument.getElementById(id);

}

//创建XMLHttpRequest对象

functioncreateXHR(){

//声明

varxhr;

//IE浏览器XMLHTTP组件的名称

varaVertion=["MSXML2.XMLHttp.5.0","Microsoft.XMLHttp"];

try{

//firefoxopera等浏览器

xhr=newXMLHttpRequest();

}catch(ex){

for(vari=0;i<aVertion.lengrh;i++){

try{

xmlHttpRequest=newActiveXObject(aVersion[i]);

returnxmlHttpRequest;

}catch(ex){

continue;

}

}

}

returnxhr;

}

Reg.js文件代码：

window.onload=function(){

//获取id="uname"节点对象

varunameDom=$("uname");

//为节点注册onblur事件

unameDom.onblur=function(){

//根据value属性获取穿的的值并且拼成传递的参数

varcontent="name="+unameDom.value;

//封装请求的url路径

varurl="./csdn/UserAction_checkName.action?time="+newDate().getTime();

//获取创建的xhr对象（XMLHTTPRequest对象）

varxhr=createXHR();

//事件处理函数触发器

xhr.onreadystatechange=function(){

if(xhr.readyState==4){//状态码返回4处理完毕（这样才能使用xhr.responseText获取返回的结果）

if(xhr.status==200||xhr.status==304){//服务器返回的状态码200一切ok304服务器没有被修改

//ajax请求之后再这里做相应的处理

$("cname").innerHTML=xhr.responseText;

//如果接收的是XML文件就用responseXML;

}

}

};

//打开请求

xhr.open("POST",true);

//如果用POST请求向服务器发送数据，需要将“Content-type”的首部

//设置为“application/x-www-form-urlencoded”它会告知服务器正在发送数据，并且数据已经符合URL编码了

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//发送请求

xhr.send(content);

};

};

Struts.xml文件代码：

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN"

"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

<includefile="www/csdn/project/resource/struts-constant.xml"/>

<packagename="test"namespace="/csdn"extends="struts-default">

<actionname="UserAction_*"class="www.csdn.project.action.UserAction"method="{1}">

<resultname="reg"type="plainText">

<paramname="location">/sc.jsp</param>

<paramname="charSet">UTF-8</param>

</result>

</action>

</package>

</struts>

最后UserAction.java文件代码：

packagewww.csdn.project.action;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.http.HttpServletResponse;

importorg.apache.struts2.ServletActionContext;

importcom.opensymphony.xwork2.ActionSupport;

publicclassUserActionextendsActionSupport{

/**

*

*/

privatestaticfinallongserialVersionUID=1L;

privateStringname;

publicStringgetName(){

returnname;

}

publicvoidsetName(Stringname){

this.name=name;

}

publicStringcheckName(){

HttpServletResponseresponse=ServletActionContext.getResponse();//获取response对象

response.setContentType("text/html;charset=utf-8");//设置相应文档类型

PrintWriterout=null;//声明输出的out对象

try{

out=response.getWriter();//根据response对象获取out对象

}catch(IOExceptione){

e.printStackTrace();

}

if("xiao".equals(name)){

out.print("用户已经存在");//输出文本

}else{

out.print("用户名可以使用");

}

out.flush();//立即写入

out.close();//关闭

return"reg";

}

}

ajax_返回xml数据的处理（包括分页）（数据库自己建立，在DAO层和service层实现用hibernate）

如图项目结构

连接数据库

数据库在相应层实现就行

首先实现页面的显示

Index.jsp文件代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@tagliburi="/struts-tags"prefix="s"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

</head>

<body>

<divalign="center">

<ahref="${pageContext.request.contextPath}/csdn/UserAction_login.action">进入后台</a>

</div>

</body>

</html>

Cindex.jsp文件代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@tagliburi="/struts-tags"prefix="s"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"

+request.getServerName()+":"+request.getServerPort()

+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/util.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/user/user_checkName.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/user/user_query.js"></script>

</head>

<body>

<divalign="center">

<divstyle="border:1px;width:600px;height:400px;">

<tablewidth="300px">

<tr>

<td>

用户名：

</td>

<td>

<s:textfieldid="uname"name="username"theme="simple"></s:textfield>

</td>

<tdstyle="color:red;font-size:10px;"id="cname">

</td>

</tr>

<tr>

<td>

密码:

</td>

<td>

<s:passwordid="upass"name="userpass"theme="simple"></s:password>

</td>

<td>

</td>

</tr>

<tr>

<tdcolspan="3"style="text-align:center;">

<s:ahref="#"theme="simple">注册</s:a>

</td>

</tr>

</table>

</div>

<div>

<span>不使用它</span>

<s:urlid="user_query"namespace="/csdn"action="UserAction_query"></s:url>

<s:ahref="%{user_query}">查询所有用户</s:a>

</div>

<br/>

<div>

<inputtype="button"value="查询所有用户"id="queryBtn">

</div>

<div>

<h3>显示所有的用户信息</h3>

<tableborder="1px"cellpadding="0"cellspacing="0">

<thead>

<th><inputtype="checkbox"id="qx"/></th>

<th>序号</th>

<th>姓名</th>

<th>性别</th>

<th>职位</th>

<th>操作</th>

</thead>

<tbodyid="showUsers"></tbody>

</table>

</div>

</div>

</body>

</html>

userpage_xml.js文件：（这里实现了分页）

window.onload=function(){

varuserBtnDom=$("userBtn");

userBtnDom.onclick=function(){

//封装请求的数据

varcontent="pagination.nowPage="+1;

//封装请求的路径

varurl="./csdn/UserAction_pagexml.action?time="

+newDate().getTime();

//调用封装的ajax的post请求

sendPost(content,disposeFail);

//成功处理函数

functiondisposeSuccess(xhr){

//接受相应的xml数据并且返回xmlDocument对象

varxmlDoc=xhr.responseXML;

//获取根对象

varroot=xmlDoc.documentElement;

//获取根节点中所有的Member节点对象

varusers=root.getElementsByTagName("user");

//显示数据

showUsers(users);

$("firstPage").onclick=function(){

content="pagination.nowPage="+1;

//发送请求的时候

sendPost(content,disposeFail);

};

$("backPage").onclick=function(){

content="pagination.nowPage="+eval(root.getAttribute("nowpage")+"-"+1);

//发送请求的时候

sendPost(content,disposeFail);

};

$("nextPage").onclick=function(){

content="pagination.nowPage="+eval(root.getAttribute("nowpage")+"+"+1);

//发送请求的时候

sendPost(content,disposeFail);

};

$("lastPage").onclick=function(){

content="pagination.nowPage="+root.getAttribute("countPage");

//发送请求的时候

sendPost(content,disposeFail);

};

}

//失败处理函数

functiondisposeFail(xhr){

alert("失败处理");

}

};

};

varupTr=null;

functionshowUsers(users){

//清空操作

if($("showUsers").hasChildNodes()){

for(varjj=0;jj<$("showUsers").childNodes.length;){

$("showUsers").removeChild($("showUsers").childNodes[jj]);

}

}

for(vari=0;i<users.length;i++){

varuser=users[i];

vartr=document.createElement("tr");

vartd1=document.createElement("td");

varinput=document.createElement("input");

input.setAttribute("type","checkbox");

input.setAttribute("value",user.getAttribute("id"));

td1.appendChild(input);

vartd2=document.createElement("td");

td2.appendChild(document.createTextNode(user.getAttribute("id")));

vartd3=document.createElement("td");

td3.appendChild(document.createTextNode(user

.getElementsByTagName("name")[0].firstChild.nodeValue));

vartd4=document.createElement("td");

td4.appendChild(document.createTextNode(user

.getElementsByTagName("sex")[0].firstChild.nodeValue));

vartd5=document.createElement("td");

td5.appendChild(document.createTextNode(user

.getElementsByTagName("role")[0].firstChild.nodeValue));

vartd6=document.createElement("td");

//创建修改按钮

varupdateBtn=document.createElement("button");

//为按钮添加文本节点

updateBtn.appendChild(document.createTextNode("编辑"));

updateBtn.onclick=function(){

upTr=this.parentNode.parentNode;

vartds=upTr.childNodes;

for(vari=0;i<tds.length;i++){

vartd=tds[i];

if(td.nodeType==1){

if(i==0){

domUserName.value=td.firstChild.nodeValue;

}elseif(i==1){

domUserSex.value=td.lastChild.nodeValue;

}elseif(i==2){

domUserRole.value=td.childNodes[0].nodeValue;

}

}

};

};

td6.appendChild(updateBtn);

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

tr.appendChild(td4);

tr.appendChild(td5);

tr.appendChild(td6);

$("showUsers").appendChild(tr);

}

}

functionsendPost(content,fail){

//ajax处理操作

//创建xhr对象

varxhr=createXHR();

//触发器

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200||xhr.status==304){

success(xhr);

}else{

fail(xhr);

}

}

};

//打开请求

xhr.open("POST","application/x-www-form-urlencoded");

//发送请求

xhr.send(content);

}

Struts.xml文件代码：

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN"

"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

<includefile="www/csdn/project/resource/struts-constant.xml"/>

<packagename="test"namespace="/csdn"extends="struts-default">

<actionname="UserAction_*"class="www.csdn.project.action.UserAction"method="{1}">

<resultname="login">/WEB-INF/page/user/user_list.jsp</result>

<resultname="xml"type="plainText">

<paramname="location">./index.jsp</param>

<paramname="charSet">UTF-8</param>

</result>

</action>

</package>

</struts>

分页的实现是在util层中封装的实现分页的代码：

Pagination.java文件代码：

packagewww.csdn.project.util;

importjava.util.ArrayList;

importjava.util.List;

/**

*

*@authorkun

*

*

*@param<T>

*/

publicclassPagination<T>extendsBaseHibernateDAO{

//每页显示的记录数

privatestaticfinalIntegerPAGESIZE=5;

//总页数

privateIntegercountPage;

//当前页

privateIntegernowPage;

//总记录数

privateIntegercountRecond;

//当前页数据

privateList<T>entities;

/**

*默认构造器

*/

publicPagination(){

super();

}

/**

*带有参数的构造器

*

*@paramclassName

*@paramnowPage

*/

publicPagination(Class<T>className,intnowPage){

this.countRecond=getCountRecord(className);

this.countPage=this.countRecond%PAGESIZE==0?this.countRecond

/PAGESIZE:this.countRecond/PAGESIZE+1;

//关于当前的处理

if(nowPage<=1){

this.nowPage=1;

}else{

if(nowPage>=this.countPage){

this.nowPage=this.countPage;

}else{

this.nowPage=nowPage;

}

}

this.entities=getNowPageInfo(this.nowPage,className);

}

publicIntegergetCountPage(){

returncountPage;

}

publicvoidsetCountPage(IntegercountPage){

this.countPage=countPage;

}

publicIntegergetNowPage(){

returnnowPage;

}

publicvoidsetNowPage(IntegernowPage){

this.nowPage=nowPage;

}

publicIntegergetCountRecond(){

returncountRecond;

}

publicvoidsetCountRecond(IntegercountRecond){

this.countRecond=countRecond;

}

publicList<T>getEntities(){

returnentities;

}

publicvoidsetEntities(List<T>entities){

this.entities=entities;

}

/**

*等到总记录数

*

*@paramclassName

*@return

*/

publicIntegergetCountRecord(Class<T>className){

inti=0;

try{

i=Integer.parseInt(this.getSession().createQuery(

"selectcount(c)from"+className.getName()+"c")

.uniqueResult().toString());

}catch(Exceptione){

e.printStackTrace();

}finally{

HiberSessionFactory.closeSession();

}

returni;

}

/**

*获取当前页的信息

*

*@paramnowpage

*@paramclassName

*@return

*/

@SuppressWarnings("unchecked")

publicList<T>getNowPageInfo(Integernowpage,Class<T>className){

List<T>entities=newArrayList<T>();

try{

entities=this.getSession().createCriteria(className)

.setFirstResult((nowpage-1)*PAGESIZE).setMaxResults(

PAGESIZE).list();

}catch(Exceptione){

e.printStackTrace();

}finally{

HiberSessionFactory.closeSession();

}

returnentities;

}

}

最后在UserAction.java文件中实现XML数据处理：

UserAction.java文件代码：

packagewww.csdn.project.action;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.http.HttpServletResponse;

importorg.apache.struts2.ServletActionContext;

importwww.csdn.project.domain.User;

importwww.csdn.project.util.Pagination;

importcom.opensymphony.xwork2.ActionSupport;

publicclassUserActionextendsActionSupport{

/**

*

*/

privatestaticfinallongserialVersionUID=1L;

privatePagination<User>pagination;

publicvoidsetPagination(Pagination<User>pagination){

this.pagination=pagination;

}

publicStringpagexml(){

//当前页信息

pagination=newPagination<User>(User.class,pagination.getNowPage());

HttpServletResponseresponse=ServletActionContext.getResponse();

response.setContentType("text/xml;charset=utf-8");

PrintWriterout=null;

try{

out=response.getWriter();

out.println("<?xmlversion='1.0'encoding='UTF-8'?>");

out.print("<usersnowpage='"+pagination.getNowPage()+"'countPage='"+pagination.getCountPage()+"'countRecond='"+pagination.getCountRecond()+"'>");

for(Userentity:pagination.getEntities()){

out.print("<userid='"+entity.getId()+"'>");

out.print("<name>");

out.print(entity.getName());

out.print("</name>");

out.print("<sex>");

out.print(entity.getSex());

out.print("</sex>");

out.print("<role>");

out.print(entity.getRole());

out.print("</role>");

out.print("</user>");

}

out.print("</users>");

out.flush();

out.close();

}catch(IOExceptione){

e.printStackTrace();

}

return"xml";

}

publicStringlogin(){

return"login";

}

}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

$.AJAX()方法中的PROCESSDATA参数
$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式
form表单提交的几种方式 表单提交方式一：直接利用form表单提交 html页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
AJAX应用之注册用户即时检测
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时_用户注册 实时异步检测
详谈基于JSON的高级AJAX开发技术
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
手写的ajax分页控件
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
文章浏览阅读3.7k次。在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖 掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有 空闲的对象，则使用此对象，否则将创建一个新的对象。下面是我最近写的一个简单的类：* XMLHttpReques_xmlhttprequest发送多个请求
Ajax 同一页面同时执行多个 XMLHTTP
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢，比如博客页，需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象，但这并不现实。其实实现方式非常简单，就是给 onreadystatechange 对应的回调函数加上参数，以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
简单介绍数据岛使用方法
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段，它在Html中形成了一个数据的集合，数据岛允许我们在Html网页中集成xml，对xml编写脚本.数据岛有它特有的形式，由标记xml开始，在开始标记中要有一个ID属性，用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种：1）内嵌的数据岛形式2）外嵌的数据岛形式说了那么多废话，还_数据中岛计算模式
AJAX 框架 用 Asp.net ajax 还是 Jquery ?
文章浏览阅读2.1k次。AJAX 流行之后，总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery， 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ，在微软的领导下，逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣，才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
轻便的XMLHttpRequest应用函数：downloadUrl()
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候，发现里面的downloadUrl函数非常好用，所以自己写了一个。用腻了那些什么框架什么池，到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明： url不用说了; callback是回调函数，函数调用的时候会有两个参数：data, responseCode，data就_xmlhttprequest downloadurl
利用XMLHTTP无刷新自动实时更新数据
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
AJAX设计模式 XMLHttpRequest调用
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用，回调，下载，抓取，实时，查询，远程通信（Remoting），远程通信脚本（RemoteScripting），同步，上传，XMLHttpRequest图6-2：XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时，web站点发出_createxmlhttpre
用javascript动态更改DropDownList下拉项
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法（根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
微調一下 Json.net ，讓他可以序列基本型別
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的，他也附了單元測試的專案，底下是我額外增加的UnitTest，我的目標就是讓底下的測試可以pass，而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
利用XMLHTTP无刷新获取数据
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
.Net 底下，Json 相關套件的限制
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int)，Asp.Net Ajax 無法正確序列日期，AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件，標榜速度快，對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要，但前幾天突然有個情況，我要序列的是一個泛型參數，該參數不一定是物object型別，有可能是st_token string in state start
编写组件，使用JavaScript更新UpdatePanel (转载)
文章浏览阅读1.3k次。转载自：http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知，UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获，并且使用 XMLHttpRequest对象发送内容，然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
无刷新网页——数据岛技术应用
文章浏览阅读1.9k次。有些时候，只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面，导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题：通过定时器或用户事件触发数据岛（XML对象）象服务器获取数据，在数据获取完成后，适时更新相关数据。示例HTML部分：http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
构建pool管理无刷新页面的xmlhttp对象
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的，如果我们的无刷新页面使用xmlhttp技术，我们或许需要频繁的建立xmlhttp对象，当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信，而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞，用户可能再次调用同一个xmlhttp实例，如果这时前一个通信未完成，那么就
Lightbox JS v2.0
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要：Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot