Ajax解析
1.Ajax
Asynchronous(异步的) javascript and xml
技术组成：
CSS + xml +JavaScript +DOM
Ajax核心对象： XmlHttpRequest
2.创建一个WEB工程
2.1给文本框一个注册事件
//给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; };
2.2定制对象，能力检测，构建请求地址，设置回调函数响应回来的数据，用send发送请求
function myajax(){
//01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);
//04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==4&&xhr.status==200){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){
myspan.innerText="用户名已经被注册";
}else{
myspan.innerText="用户名可以注册";
}
}
};
//05.用send真正的发送请求
xhr.send(null);
}
3.index.jsp页面
<body>
用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
密码： <input type="password" name="txtPwd"/>
</body>
4.servlet层
package servlet; 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; public class CheckUserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { String uname = request.getParameter("uname");
if (uname.equals("admin")) { response.getWriter().write("OK"); }else {
response.getWriter().write("NO");
}
} }
4.实现效果
5.使用Post方法
<%@ 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 'index.jsp' starting page</title>
<script type="text/javascript"> //给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; }; function myajax(){ //01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("post","<%=path%>/servlet/CheckUserServlet",true); //04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==4&&xhr.status==200){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){ myspan.innerText="用户名已经被注册";
}else{ myspan.innerText="用户名可以注册";
}
}
}; //05.用send真正的发送post请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("uname="+myval);
} </script>
</head> <body>
<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
<input type="password" name="txtPwd"/>
</body>
</html>
6.使用jQuery方法
<%@ 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 'index.jsp' starting page</title> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <script type="text/javascript"> //给文本框注册一个失去焦点事件
$(function(){
//等待页面上所有标签完毕后执行
var dom=$("#txtName");
dom.blur(function(){
myjquery();
});
}); function myjquery(){
var dom=$("#txtName");
$.ajax({
url:'<%=path%>/servlet/CheckUserServlet',
type:'post',
data:{uname:dom.val()},
success:function(today){
//today server 打到 浏览器的数据
alert(today);
}
}); }
</script> </head> <body>
<h1>我是Jquery发送Ajax</h1>
<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
<input type="password" name="txtPwd"/>
</body>
</html>
Ajax解析的更多相关文章
- jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
- 使用js接收ajax解析的json再拼成一个自己想要的json
//ajax解析的json{ "status": 1, "content": { "pathsInfo": [ { "id&quo ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- JQuery AJAX 解析获得的JSON数据
下面的解析的Json是一个二级循环. <!DOCTYPE html> <html> <head> <script src="https://code ...
- 关于ajax解析
出处:http://www.cnblogs.com/huashanlin/archive/2006/10/09/524707.html 要很好地领会Ajax技术的关键是了解超文本传输协议(HTTP), ...
- asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析
一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求. 当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习. 今天就用ashx来接收页面请求,并调用 ...
- 使用Ajax解析数据遇到的问题
数据格式 我最近在使用JQuery的$.ajax访问后台的时候,发现竟然无法解析返回的数据,具体的错误记不清了(以后在遇到问题先截个图),可以在浏览器的Console中看到一个错误,但是去看这条请求是 ...
- IE6 ajax解析parseerror
IE6下,用a[href="javascript:void(0);"]或者a[href="javascript:;"]发起ajax|jsonp请求会出现请求成功 ...
- 爬虫实战【7】Ajax解析续-今日头条图片下载
昨天我们分析了今日头条搜索得到的信息,一直对图集感兴趣的我还是选择将所有的图片下载下来. 我们继续讲一下如何通过各个图集的url得到每个图集下面的照片. 分析图集的组成 [插入图片,某个图集的页面] ...
- 使用ajax解析后台json数据时：Unexpected token o in JSON at position 1
json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...
随机推荐
- jQuery mini ui 2
1.<a class="mini-button" iconCls="icon-add" onclick="addRow()" plai ...
- JavaScript 之 使用 XMLHttpRequest 上传文件
<div id="div1"> <input type="file" id="uploadfile" style=&quo ...
- Java知识整理一
文档二 密码:java
- 单点登录CAS使用记（六）：单点登出、单点注销
单点登出基本上没有啥配置 直接在原来logout的时候,重定向到Cas-Server的logout方法 @RequestSecurity @RequestMapping(value = "l ...
- Max Min Middle
/*三者中的中间数*/#define Max(a,b) (a>b?a:b) #define Min(a,b) (a<b?a:b) int MiddleOfThree(int a, int ...
- 【转】Qt 事件处理机制 （下篇）
转自:http://mobile.51cto.com/symbian-272816.htm 在Qt中,事件被封装成一个个对象,所有的事件均继承自抽象类QEvent. 接下来依次谈谈Qt中有谁来产生.分 ...
- 【Ecstore2.0】导出问题解决（未导出或导出文件为0字节)
如果导出队列能成功执行(队列不执行看这里)但是并未生成文件,那么原因大部份可能是出在FTP上. ECSTORE2.0采用了PHP的FTP模块,所以先确认你的环境是否安装了FTP模块,如果没有,安装并在 ...
- js console.log 打印 对像 数组 详解
console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...
- iScroll 下拉刷新
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- 如何用PowerPoint制作闪烁的星星
在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...