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 ...
随机推荐
- 05-XML遍历递归显示到TreeView上（XDocument类）
1.XML文件(x1.xml): <?xml version="1.0" encoding="utf-8" ?> <itcast> &l ...
- C# DateTimePicker控件如何精确设置显示时分秒
项目中需要使用DateTimePicker空间选定当前的时间,但是这个空间默认显示到天,如何能让它显示具体的小时和分钟呢? 我们看到有一个Format属性,Format令我们想到格式化,有这几种格式 ...
- 正式进入C#的世界——委托
委托(delegate)1.可以认为是这样的对象,它包含具有相同签名和返回值类型的有序方法列表.2.可以理解为函数的一个包装,它使得C#中的函数可以作为参数来被传递. 委托的定义和方法的定义类似,只是 ...
- DedeCMS批量替换栏目文件保存目录的方法
学点sql还是很有必要的. 有时候由于栏目太多,但是要修改一下栏目的保存目录.一个一个修改真的有点费事和慢.所以想了一个方法来批量修改栏目的保存目录.就是批量替换: update dede_arc ...
- Android时间戳转换为标准Datetime（yyyy-MM-dd hh:mm:ss)格式
下列函数为实现过程,已经测试通过. /// <summary> /// Android时间戳转换为标准Datetime /// </summary> /// <param ...
- 一条insert语句批量插入多条记录
一条insert语句批量插入多条记录 常见的insert语句,向数据库中,一条语句只能插入一条数据: insert into persons (id_p, lastname , firstName, ...
- Arcgis Desktop 9.3 安装
以下用到的 Crack在我的网盘中有: ref: http://pan.baidu.com/s/1pJJlVBl 密码: p4gk 一,安装 Desktop(依次按照如图安装): 二,配置 1,以上步 ...
- sql查询每门课程成绩最高的学生
给出数据库(sco)如下图: 查出每门课程成绩最高的学生 select b.id,b.kemu,b.name,b.chengji from (select kemu,max(chengji) maxc ...
- linux上ln命令详细说明
ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...
- kafka教程
一.理论介绍(一)相关资料1.官方资料,非常详细: http://kafka.apache.org/documentation.html#quickstart2.有一篇翻译版,基本一致,有些细节不 ...