ajax兼容源代码
本案例是ajax原始写法,没有使用框架,并使用java服务器响应返回,代码如下:
originalityAjax.html代码如下:
Html代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>最原始的ajax写法</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- <script type="text/javascript">
- //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- var xmlHttpRequest;
- //用户名校验的方法
- function verify() {
- var success = createXMLHTTPRequest();
- if (!success) {
- return;
- }
- var userName = document.getElementById("userName").value;//获取用户名字
- //2.注册回调函数
- //注册回调函数时,之需要函数名,不要加括号
- //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
- xmlHttpRequest.onreadystatechange = callback;
- //3。设置连接信息
- //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
- //第二个参数表示请求的url地址,get方式请求的参数也在url中
- //第三个参数表示采用异步还是同步方式交互,true表示异步
- //记住在url后面加上时间戳
- //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);
- //POST方式请求的代码
- xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);
- //POST方式需要自己设置http的请求头
- xmlHttpRequest.setRequestHeader("Content-Type",
- "application/x-www-form-urlencoded");
- //POST方式发送数据
- xmlHttpRequest.send("username=" + userName);
- //4.发送数据,开始和服务器端进行交互
- //同步方式下,send这句话会在服务器段数据回来后才执行完
- //异步方式下,send这句话会立即完成执行
- //xmlHttpRequest.send(null);
- }
- //回调函数
- function callback() {
- //alert(xmlHttpRequest.readyState);
- //5。接收响应数据
- //判断对象的状态是交互完成
- if (xmlHttpRequest.readyState == 4) {
- //判断http的交互是否成功
- if (xmlHttpRequest.status == 200) {
- //获取服务器器端返回的数据
- //获取服务器段输出的纯文本数据
- var responseText = xmlHttpRequest.responseText;
- //将数据显示在页面上
- //通过dom的方式找到div标签所对应的元素节点
- var divNode = document.getElementById("result");
- //设置元素节点中的html内容
- divNode.innerHTML = responseText;
- } else {
- alert("出错了!!!");
- }
- }
- }
- //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
- function createXMLHTTPRequest() {
- //1.创建XMLHttpRequest对象
- //这是XMLHttpReuquest对象无部使用中最复杂的一步
- //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
- if (window.XMLHttpRequest) {
- //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
- xmlHttpRequest = new XMLHttpRequest();
- //针对某些特定版本的mozillar浏览器的BUG进行修正
- if (xmlHttpRequest.overrideMimeType) {
- xmlHttpRequest.overrideMimeType("text/xml");
- }
- } else if (window.ActiveXObject) {
- //针对IE6,IE5.5,IE5
- //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
- //排在前面的版本较新
- var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
- for ( var i = 0; i < activexName.length; i++) {
- try {
- //取出一个控件名进行创建,如果创建成功就终止循环
- //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
- xmlHttpRequest = new ActiveXObject(activexName[i]);
- break;
- } catch (e) {
- }
- }
- }
- //确认XMLHTtpRequest对象是否创建成功
- if (!xmlHttpRequest) {
- alert("XMLHttpRequest对象创建失败!!");
- return false;
- } else {
- //0 - 本地响应成功
- //alert(xmlhttp.readyState);
- return true;
- }
- }
- </script>
- </head>
- <body>
- 请输入要验证的用户名字(输入admin试试):<br/>
- <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
- <div id="result"></div>
- </body>
- </html>
和servlet交互的,OriginalityAjaxAction.java代码如下:
Java代码
- package web.action;
- 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;
- //对原始的ajax页面请求的控制器
- public class OriginalityAjaxAction extends HttpServlet {
- private static final long serialVersionUID = 1978049925174268801L;
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- this.doPost(request, response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- request.setCharacterEncoding("UTF-8");
- String username = request.getParameter("username");
- response.setCharacterEncoding("UTF-8");
- PrintWriter out = response.getWriter();
- //将数据返回给页面
- if(username.equals("admin")){
- out.print("用户:[admin]已经被使用了");
- }else{
- out.print("用户:[" + username + "]可以使用");
- }
- }
- }
web.xml的servlet配置如下:
Xml代码
- <servlet>
- <servlet-name>OriginalityAjaxAction</servlet-name>
- <servlet-class>web.action.OriginalityAjaxAction</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>OriginalityAjaxAction</servlet-name>
- <url-pattern>/OriginalityAjaxAction</url-pattern>
- </servlet-mapping>
以上简单的页面和servlet交互,返回一个字符串结果。
相关文章
javascript ajax 完整实现代码案例jquery实现ajax提交form表单的方法ajax async异步请求和同步请求ajax兼容源代码ajax响应状态readystateajax回调responsetextajax发送请求sendajax使用方法ajax是什么ajax加载xml案例ajax xmlhttp参考手册jquery.ajax url settings jqueryphp openssl 函数 输出一个 pkcs#12 兼容的证书存储文件php openssl 函数 将 pkcs#12 兼容证书存储文件导出到变量php 从 php 4 移植到 php 5 未向下兼容的改变php 从 php 5.2.x 移植到 php 5.3.x 不向下兼容的变化php 从 php 5.3.x 迁移到 php 5.4.x 不向后兼容的变更php 从 php 5.4.x 迁移到 php 5.5.x 不向后兼容的变更php 从php 5.5.x 移植到 php 5.6.x 向后不兼容javascript ajax 原生兼容写法
AJAX教程 目录
关注编程学问公众号
