Ajax专题:异步交互局部刷新初步
为什么80%的码农都做不了架构师?>>>
从一个用户名校验的例子来认识Ajax的基础应用
首先创建html事件触发端的代码
<!--ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签-->
<!--ajax方式不需要name属性,需要一个id的属性-->
<input type="text" id="username" />
<input type="button" value="校验" οnclick="verify()"/>
<!--这个div用于存放服务器段返回的信息,开始为空-->
<!--id属性定义是为了利用dom的方式找到某一个节点,进行操作-->
<div id="result"></div>
当我们得到服务器端返回的数据后动态的填充到div标记中
然后,服务器端我们创建一个Servlet命名为AJAXServer,用于校验客户端的数据并返回,实际上客户端的数据是由我们的AJAX引擎接收到并传给服务器端,然后再由AJAX引擎接收到服务器端的数据,返回给客户端动态加载的,这是一个异步的机制,这是后话,我们先来创建我们的Servlet
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
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();
//1.取参数
String old = httpServletRequest.getParameter("name");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
String name = URLDecoder.decode(old,"UTF-8");
//3.校验操作,模拟数据并没有真正的取数据库信息,这个不是客户端关心的,客户端只看是不是服务器返回的数据
if(name.equals("jerry")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端,而不是将一个新的页面发送给用户
out.println("用户名[" + name + "]已经存在,请使用其他用户名" );
} else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册 ");
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
好了,服务器端校验完成,开始创建我们真正的AJAX应用了,来创建我们对应到客户端html中的js文件了,取名为checkUserName,当然我们不能忘了再客户端html文件中引入我们创建的js文件<script type="text/javascript" src="jslib/checkUserName.js"></script>
下面我们来具体来创建操作的代码
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框中的数据
//document.getElementById("username")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,如果<input>
//.value可以获取一个元素节点的value属性值
var userName = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
//这是XMLHTTPRequest对象五步使用中最复杂的一步
//需呀针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定banben的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE5,IE5.5,IE6(IE7,IE8)
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js数组中
//排在前面的版本较新
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,抛出异常,然后继续循环,继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
return;
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时,只需要函数名,不要加括号
//我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlhttp.onreadystatechange=callback;
//3.设置链接信息
//第一个参数表示http的请求方式,支持所有http的方式,主要使用get和post
//第二个参数表示请求的url地址,get方式请求的参数也会在URL中
//第三个参数表示采用异步还是同步方式交互,true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
//4.发送数据,开始和服务器端进行交互
//同步范式下,send这句话会在服务器端数据回来后才执行完
//异步方式下,send这句话会立即完成执行
xmlhttp.send(null);
// Post请求方式的代码
xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
}
//回调函数
function callback(){
//5接收响应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器端输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}
}
}
好了,AJAX应用的具体步骤代码中都有详细的解释了,一个简单的AJAX的应用完成了,赶快试试吧
转载于:https://my.oschina.net/MiniBu/blog/284303
Ajax专题:异步交互局部刷新初步相关推荐
- a标签不跳转+ajax异步请求+局部刷新页面
a标签不跳转 <td style="text-align:center;"><a href="" style="color: #2d ...
- ajax提交成功后局部刷新 jq_JQuery ajax局部刷新实例
在我们开发的时候,我们回时常用到javascript实现页面局部刷新,本文我们就和大家分享JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 案例: 描述: 1. 点击登 ...
- ajax异步提交局部刷新页面,ajax异步请求定时刷新局部页面
用户提问 $(document).ready(function () { $.ajax({ type: 'GET', url:'http://localhost:8080/SSM/user/findR ...
- Ajax 数据异步交互
#1.Ajax简介AJAX = 异步 JavaScript 和 XML.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在 ...
- asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- ajax局部操作,ajax局部刷新是怎么操作的?具体什么步骤呢?
大家知道什么是ajax吗?是的,ajax就是用来局部刷新的作用,那么ajax是如何进行页面的局部刷新呢?具体操作又是怎么样的呢?接下来与大家一起来了解下ajax局部刷新的操作. 简单的来说Ajax就是 ...
- 实现Ajax异步交互
实现Ajax的执行步骤 1.创建Ajax的核心对象XMLHttpRequest对象 function createXMLHttpRequest(){//创建Ajax的核心对象XMLHttpReques ...
- Ajax同步交互与异步交互
Ajax同步交互与异步交互 同步交互是什么 所谓同步交互,就是指发送一个请求,需要等待返回,然后才能够发送下一个请求.同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同. 说明:同步交互就是第 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- ajax如何做到异步交互,1.ajax简单实现异步交互
效果:点击获取信息 testAjax.jsp: pageEncoding="UTF-8"%> Insert title here function getName(){ va ...
最新文章
- php多图片上传程序,php多文件上传 多图片上传程序代码
- Python 技术篇-mac下安装、卸载pip方法
- Fence Repair POJ - 3253
- 深入学习Oracle分区表及分区索引
- 动态规划入门(一)——数字三角形
- Java基础——Arrays工具类的使用
- linux虚拟机上离线安装mysql_Linux下离线安装MySQL
- Linux C socket 编程之TCP
- 一个具有对象计数功能的基类
- 硬盘绝密维修资料(2)
- sklearn实现lda主题模型LatentDirichletAllocation
- 服务器上打开PHP文件却出现下载界面或者502
- 小心!第三方支付最常遇到的 6 大骗局!
- 什么是类?什么是对象?类与对象之间是什么关系?类的特性有哪些?
- 云计算技术,主要包括哪些关键技术?
- 孙溟㠭篆刻《天地宽》
- 标定中的zoomfocus
- gardner环 matlab,gardner 算法matlab实现
- 【一起进大厂】7天掌握react基础系列(1)
- 【Java杂货铺】JVM#Java高墙之内存模型
热门文章
- MATLAB生成数组
- icesat2 重要参数
- ArcGIS修改矢量边界(土地利用图图斑)
- 实习成长之路:MySQL十三: count(*)这么慢,我该怎么办?为什么那么慢?
- JavaEE学习01--Tomcat服务器
- Flutter之Widget构建过程详解
- Android视频会议--彩蛋
- Android Multimedia框架总结(二十三)MediaCodec补充及MediaMuxer引入(附案例)
- 打造一流云计算机房,【迈向“双一流”】为科研插上云计算的“翅膀”
- kettle安装,启动spoon之后一闪就没了问题