jquery库实现ajax
function verify(){
//1、获取文本框内容
//js方法
//document.getElementById("userName") 获取dom方法
//jquery方法,id的选择器(#),class选择器(.)
//jquery的方法返回的都是jquery的对象,可以在它上面继续执行其他jquery方法
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
//2、传送数据到Server
//jquery方法
$.get("AjaxServer?name="+userName,null,callback) ;
}
//回调函数
function callback(data){
//3、接受server数据
//4、动态显示返回数据
var resultObj = $("#result");
resultObj.html(data);
}
使用XMLHttpReque来进行Ajax异步数据交互
//使用XMLHttpReque来进行Ajax异步数据交互
var xmlhttp;
function verify(){
//1、使用dom方式获取文本框内容
var userName = document.getElementById("userName").value;
//2、创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//针对firefox,safari、opera,IE7+
xmlhttp = new XMLHttpRequest();
//针对某些版本的Mozill的浏览器
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXObject){
// 针对IE5、IE6、IE5.5
//两个可以用于创建XMLHttpRequest的空间名称
var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length; i++){
try{
xmlhttp = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(!xmlhttp){
alert("创建失败");
return;
}
//3、注册回调函数
//readystate一改变回调函数调用
xmlhttp.onreadystatechange = callback;
//4、设置连接信息
xmlhttp.open("GET","AjaxServer?name="+userName,true);
//POST请求方式的区别:设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送内容在send中
//5、发送数据,与server交互
//同步方式下,send这句会在服务器数据回来后才执行完
//异步方式下,send这句立即执行完
xmlhttp.send(null);
}
function callback(){
//6、接收响应数据
//判断对象的状态是否交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
var responseText = xmlhttp.responseText;
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
}
xml格式数据交互
var xmlhttp;
function verify() {
var userName = document.getElementById("userName").value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activeName.length; i++) {
try {
xmlhttp = new ActiveXObject(activeName[i]);
break;
} catch (e) {
}
}
}
if (!xmlhttp) {
alert("创建失败");
return;
}
xmlhttp.onreadystatechange = callback;
xmlhttp.open("GET", "AjaxXMLServlet?name=" + userName, true);
xmlhttp.send(null);
}
function callback() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var domObj = xmlhttp.responseXML;
if (domObj) {
var messageNodes = domObj.getElementsByTagName("message");
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
var responseMessage = textNode.nodeValue;
var divNode = document.getElementById("result");
divNode.innerHTML = responseMessage;
} else {
alert("有问题了!" + xmlhttp.responseText);
}
} else {
alert("有问题了!" + xmlhttp.responseText);
}
}
}
}
jquery xml格式数据交互
function verify(){
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
//javascript中一个简单对象的定义方法:
//var obj = {name:"haha",age:12};
$.ajax({
type:"POST",
url:"AjaxXMLServlet",
data:"name="+userName,
dataType:"xml",
success:callback,
error:handleError
});
}
function handleError(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
}
function callback(data){
//首先要把dom对象转换为jquery对象
var jqueryObj = $(data);
var message = jqueryObj.children();
var text = message.text();
var resultObj = $("#result");
resultObj.html(text);
}
解决XHR与图片缓存问题
IE对于相同的url默认从缓存读取
方法:添加时间戳
function convertURL(url){
var timestamp = (new Date()).valueOf();
if(url.indexOf("?")>=0){
url = url + "&t=" + timestamp;
}else{
url = url + "?t=" + timestamp;
}
return url;
}
解决Ajax中文乱码
1、页面端做一次encodeURI:
var url = "AjaxServer?name="+encodeURI(userName);
服务器端:
String name = new String(old.getBytes("ISO8859-1"),"UTF-8");
2、页面端做两次encodeURI:
var url = "AjaxServer?name=" + encodeURI(encodeURI(userName));
服务器端:
String name = URLDecoder.decode(old,"UTF-8");
解决Ajax跨域访问问题
代理服务器
传送Text的Servlet
public class AjaxServer extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
// String name = new String(old.getBytes("ISO8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
if(old == null || old.length() == 0){
out.println("用户名不能为空");
}else{
// String name = old;
if(name.equals("liaolitao")){
out.println(name+"已经存在");
}else{
out.println(name+"尚未存在,可以注册");
}
}
}
}
传送xml的Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
StringBuilder builder = new StringBuilder();
builder.append("<message>");
if(old == null || old.length() == 0){
builder.append("用户名不能为空").append("<message>");
}else{
String name = old;
if(name.equals("liaolitao")){
builder.append(name+"已经存在").append("</message>");
}else{
builder.append(name+"尚未存在,可以注册").append("</message>");
}
out.println(builder.toString());
}
}
分享到:
相关推荐
ajax学习很好的学习文档ajax学习很好的学习文档
ajax学习 ajax 教学 学习 java 教程ajax 教学 学习 java 教程ajax 教学 学习 java 教程
我总结的Ajax学习资料,希望对大家有所帮助!
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all
Ajax学习全攻略,很好很全面的学习资料,能够使你很快的学习到当前流行的Ajax技术,一定会受益匪浅。
javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip
.net中ajax学习解决方案,很好地代码程序,供大家参考
ajax学习用的ppt课件;主要教你ajax实现原理,并且配备了实例说明。是一个不错学习课件。
ajax ajax原理 ajax代码 ajax编程 ajax学习
Ajax 学习笔记,超详细的噢!不看后悔,自己上培训班时记的笔记
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...
Ajax学习资料 (完整资料 12册pdf+示例 简单-深入)+示例+总结
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习
AJAX 的学习资料,全部手写,以及 用 JQREY调用等 。。 大量实例,如 无分页刷新,评论,等 。。值得学习。。
ajax学习视频,我自己学了感觉还不错,分享给大家一起学习!
AJAX学习源码 AJAX简要介绍: 关于AJAX的发展史本文就不再重述了,有兴趣的同学可以到网上去搜索,这种你可以说我也可以说的话,应该到处都是,本文就都略去不讲了。对于AJAX的简要概述,笔者也只有一段话: ...
AJAX学习AJAX学习AJAX学习
ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax...