【Ajax技术】使用XHR对象发送和接受数据

紧接着上一篇，我们获取XMLHttpRequest之后，就要使用XHR对象发送和接受数据了，继续完善我们的javascript脚本文件：
verifyown.js:

//用户名校验的方法
//这个方法使用AMLHttpRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){//1.使用最基本的DOM_API来获取文本框中的值//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML//页面中的一个标签，.value可以获取一个元素节点的value属性值//var username=document.getElementById("username").value;//2.创建XMLHttpRequest对象//这是XMLHttpRequest对象五步使用中最复杂的一步//这是由于各种浏览器兼容问题造成的，要使用各种库来屏蔽掉这种差异//下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码if(window.XMLHttpRequest){//针对FireFox、Mozillar、Opera、Safari、IE7、IE8xmlhttp=new XMLHttpRequest();//修复类似Mozillar浏览器的bugif(xmlhttp.overrideMimeType){xmlhttp.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//所有的IE中window.ActiveXObject条件都成立//针对IE6、IE5.5、IE5(现在没人用了，可以把这条if分支删除)//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中//排在前面的版本最新var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(var i=0;i<activeName.length;i++){try{//获取一个控件名进行创建，如果创建成功就终止循环//如果创建失败，会抛出异常，然后就可以继续循环，继续尝试创建xmlhttp=new ActiveXObject(activeName[i]);break;}catch(e){//仍然不能创建，抛出异常后，给出友好提示}}      }//确认XMLHttpRequest对象创建成功if(!xmlhttp){alert("XMLHttpRequest对象创建失败！！");}else{alert(xmlhttp);}//2.注册回调函数//后面写的是函数名，千万不要加括号，会把//回调函数的返回值给XHR的回调函数对象xmlhttp.onreadystatechange=callback;//3.设置连接信息//包括传输方式(get/post)，请求的url地址，异步还是同步方式(true/false)，账号和密码(可不写)xmlhttp.open("GET","AjaxServer?name="+username, false);/*** Post方式* req.open("POST", action, false);* req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");* var str="name="+username;* req.send(str);* *///4.发送数据，开始和服务器端进行交互//同步方式下，send这句话会在服务器端数据回来之后才执行//异步方式下，send这句话会立即完成执行xmlhttp.send(null);
}//回调函数
function callback(){//判断对象的状态是交互完成//XHR的交互状态readyState代号有：/*** 监听服务器返回的状态一共有五个状态：* 0,1,2,3,4* 0是啥都没有连接的时候* 1是open方法还没被调用* 2是open方法调用了，send方法没有执行* 3是open方法执行了，send方法也执行了* 4是返回结果的时候的状态(status) * */if(xmlhttp.readyState==4){//判断http的交互是否成功if(xmlhttp.status==200){//获取服务器端返回的数据//一种是纯文本的形式，一种是DOM对象var responseText=xmlhttp.responseText;//将数据显示在界面上//通过DOM的方式找到div标签对应的元素节点var divNode=document.getElementById("result");//设置元素节点中的html内容divNode.innerHTML=responseText;}}
}

回顾一下html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>用户校验ajax实例</title><script type="text/javascript" src="js/verifyown.js"></script></head><body><h1> 用户校验ajax实例</h1><br>请输入用户名:<br/><!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 --><!-- ajax不需要name属性，只需要一个id的属性 --><input type="text" id="username"/><input type="button" value="校验" οnclick="verify()"/><!-- 这个div用于存放服务器返回的信息，开始为空 --><!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 --><div id="result"></div><!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 --></body>
</html>

服务端的servlet：

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class AjaxServer extends HttpServlet {protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {doGet(httpServletRequest, httpServletResponse);}protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {try{httpServletResponse.setContentType("text/html;charset=utf-8");PrintWriter out = httpServletResponse.getWriter();//inte用来记录验证次数Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");int temp = 0;if (inte == null) {temp = 1;} else {temp = inte.intValue() + 1;}httpServletRequest.getSession().setAttribute("total",temp);//1.取参数String old = httpServletRequest.getParameter("name");//String name = new String(old.getBytes("iso8859-1"),"UTF-8");String name = URLDecoder.decode(old,"UTF-8");//2.检查参数是否有问题if(old == null || old.length() == 0){out.println("用户名不能为空");} else{if(name.equals("hpu")){//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户//写法没有变化，本质发生了改变out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);} else{out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);}}} catch(Exception e){e.printStackTrace();} }}

最后在浏览器编辑框中输入123，点击“校验”，返回结果：
用户名[123]尚未存在，可以使用该用户名注册, 1

自己写的ajax测试成功！

转载请注明出处：http://blog.csdn.net/acmman/article/details/47667211

【Ajax技术】使用XHR对象发送和接受数据相关推荐

Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
一.概述 1.1 发展历程在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...
ajax后台如何把对象转为json_SM后台数据与前端（PC、M站、Android、IOS）的交互——页面渲染...
一.介绍对于后台服务器开发者来说,更多的是处理客户端发过来的请求和业务逻辑,很少会有人考虑页面的渲染问题. 以前的大部分后台开发人员最多也就是在 jsp 页面或者其他视图渲染框架来渲染PC端的页面, ...
【Python】udp网络程序-发送、接受数据
udp网络程序-发送.接收数据 1. udp网络程序-发送数据创建一个基于udp的网络程序流程很简单,具体步骤如下: 创建客户端套接字发送/接收数据关闭套接字与发短信类似. 代码如下: #co ...
Android 蓝牙hfp协议连接slc连接rfcomm连接源码分析（2）- HF侧发送和接受数据流程
android-蓝牙A2dp-avrcp-hfp-opp-配对流程-ble-rfcomm源码流程 Android 蓝牙hfp初始化.rfcomm连接.slc连接.sco连接源代码分析大全 - 点击下载 ...
java笔记：自己动手写javaEE框架（七）--使用JSON和Ajax技术
今天我要将json和ajax引入到我所写的框架,不过今天用到的技术有部分不是我框架最终使用到的技术,比如ajax技术,我用到的是最为原始的ajax技术,这次算是对老技术的回顾,不过不管技术如何演进,对 ...
J2EE开发技术点4：ajax技术
前言 AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.需要知道的是,Ajax技术并不是一项新的技术,而是使用现有技术解决问题的新方法.Ajax(Asynchronous ...
jquery的Ajax技术和PHP通信
jquery的Ajax技术和PHP通信为了更好的用户体验和实时交互,有时候我们需要要到ajax技术来实现和后台服务器的数据交换.而jQuery的ajax技术是我认为是最简单的,在开发过程中 ...
网络——在网络上发送，接收数据
问题创建并加入一个网络会话是一回事,但如果不能发送或接收任何数据那么网络会话有什么用呢? 解决方案当玩家连接到会话时,你可以在一个PacketWriter流中存储所有想要发送的数据.完成这个操作后 ...
STM32L152RE实现串口发送及接收数据
本文主要讲解用keil软件实现USART串口发送及接收数据,默认读者keil环境已经配好,且头文件已正确引入,如出现编译错误以及st-link下载问题,请自行百度解决. 串口发送和接收数据是一件看起来 ...

【Ajax技术】使用XHR对象发送和接受数据

【Ajax技术】使用XHR对象发送和接受数据相关推荐

最新文章

热门文章