Web项目中的“后台服务”——ajax
2016-01-30 20:47
459 查看
我对ajax的理解:把它当做一个类似于后台服务比较好理解。例如判断文本框是否为空,把文本框的值通过ajax传给“后台服务”并根据返回值来确定执行什么代码
如何使用ajax:
①创建XMLHttpRequest对象(注意浏览器兼容问题):var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); /*IE游览器*/ var xmlHttp = new XMLHttpRequest(); /*火狐浏览器等*/
②通过open方法创建请求:
open(method,url,asynchronous,user,password);
method为请求类型,get或者post
url为请求的地址,即服务的代码所在位置
asynchronous为是否异步,true为异步,false为同步,可选参数
user为请求的用户名,可选参数
password为请求的密码,可选参数
例如:
xmlHttp.open("GET", "02/server.jsp?username=" + name, true);
③通过onreadystatechange属性(不确定是方法还是属性)设置回调函数,即请求成功后执行的函数:
例如:
xmlHttp.onreadystatechange = validateResult; /*只写方法名!!!!*/
④通过send方法发送请求:
例如:
xmlHttp.send(null);
实例:判断文本框输入的文字,文本框为空、文本框内容符合要求或者不符合要求,这三种情况做出不同的反应
老规矩看一下项目结构:
①ajaxtest.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'ajaxtest.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) //IE游览器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) //火狐游览器 xmlHttp = new XMLHttpRequest(); } function validateusername() { createXMLHttpRequest(); var name = document.getElementById("username").value; /*document.getElementById("");为js中的dom,过几天我会专门就这个写个博客,敬请期待*/ if (name == "") { document.getElementById("result").innerText = "用户名为空"; /*innerText在IE浏览器可以使用,貌似相当一部分浏览器不能用*/ return; } else { document.getElementById("result").innerText = " "; xmlHttp.open("GET", "02/server.jsp?username=" + name, true); /*在jsp中url受到basepath的影响*/ xmlHttp.onreadystatechange = validateResult; xmlHttp.send(null); } } function validateResult() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var re = xmlHttp.responseText; /*responseText获得服务返回的文本,responseXml获得服务返回的XML文档*/ if (re == "1" || re == 1) { /*这里的re不确定返回的数据为什么类型,我用IE测试,返回的为整数类型*/ document.getElementById("result").innerText = "用户名不可用"; } else { document.getElementById("result").innerText = "用户名可用"; } } } /* innerText只能在IE使用,浏览器兼容性 var的数据类型 */ </script> </head> <body> 用户名: <input type="text" onblur="validateusername()" id="username" name="username"> <label id="result">请输入用户名</label> </body> </html>
②server.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% /* 和jsp中的用法差不多 */ String name = request.getParameter("username"); if (name.equals("admin")) { out.print("1"); } else { out.print("2"); } %>
昨天晚上让这个ajax愁了一大会,原来是浏览器不兼容的问题。这是Web项目开发的大问题呀!!!
相关文章推荐
- 安卓开发——background与src的区别
- ARM里面的APB和AHB
- FPGA BCD计数器(一位)
- Hadoop—archive
- 设计模式总结
- 设计模式六大原则(1):单一职责原则
- 用R语言进行数据探索
- POJ 1477:Box of Bricks
- linux 信号 信号的递送
- mysql实时增量备份 binlog日志备份
- 支持向量机通俗导论(理解SVM的三层境界)
- 人海中寻找,真的遇到你——Spring @ responsebody
- hash 1
- 测试一下使用word写博客
- 分享一个PHP抽奖算法程序代码
- Unable to start the Genymotion virtual device
- 一个操作EXCEL的C#类ExcelUtils
- 理论: 博弈4 :威佐夫博奕(Wythoff Game)
- 面试题总结-阿里神马和通联数据(算法)
- jQuery的扩展