一、Ajax简介

Ajax(Asynchronous JavaScript and Xml)--异步刷新技术

Ajax的关键元素包括以下内容:

① JavaScript语言:Ajax技术的主要开发语言。

② XML/JSON/HTML等:用来封装请求或响应的数据格式

③ DOM(文档对象模型):通过DOM属性或方法修改页面元素,实现页面局部刷新

④ CSS:改变样式,美化页面效果,提升用户体验度

⑤ Ajax引擎:即XMLHttpRequest对象,以异步方式在客户端与服务器之间传递数据。

二、Ajax工作流程

三、常用方法:

四、常用属性

五、实现思路:

1、锁定用户名文本框,注册onblur事件

2、创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式

3、设置回调函数。通过onreadystatechange属性设置回调函数,其中回调函数需要自定义

4、初始化XMLHttpRequest对象。通过open()设置请求的发送方式和路径

5、发送请求

准备简单页面:

 <body>
用户名:<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
密码: <input type="password" name="txtPwd"/>
</body>

创建Servlet:回送信息

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");
}

注:

步骤一:通过window。XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true,说明是新版本IE或其他浏览器,可使用new XMLHttpRequest()方式创建XMLHttpRequest对象;如果为false,说明是老版本IE浏览器,需使用new ActiveXObject("Microsoft.XMLHttp")的方式创建XMLHttpRequest对象

步骤二:通过XMLHttpRequest对象的onreadystatechange属性设置回调函数,用于当请求成功后接收服务器端返回的数据

步骤三:通过XMLHttpRequest对象的open()方法,传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式,选择发送Httpget 请求,因此参数为get。第二个参数为要发送的url请求路径,将要发送的数据附加到url路径后面

步骤四:调用XMLHttpRequest对象的send()方法,参数为要发送到服务器端的数据,因为采用"get"方式请求时,参数已经附加到url路径后,所以直接设置为null。如果send()方法不设值,在不同的浏览器下可能存在不兼容问题。

执行完毕后,异步请求的发送过程就结束!

注:使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

采用Get方式发送请求时,通常会将需要携带的参数附加在URL路径后面一起发送,所以send()不需要传递参数,设置为null即可


六 、使用jQuery实现Ajax

jQuery常用的Ajax方法

语法:$.ajax([settings]);

常用属性参数:

常用函数参数:

使用$.ajax()验证用户名--使用$.ajax() 实现异步交互

注:需引jquery-1.11.1.js库

<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.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(result){
alert(result);
}
});
}
</script> </head> <body>
<h2>使用jQuery实现Ajax</h2>
用户名:<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
密码: <input type="password" name="txtPwd"/>
</body>

实现效果:

若输入的非admin,即可注册,否则无法注册

若是post请求,调试效果如下:


七、JSON简介

JavaScript Object Notation是一种轻量级的数据交换格式

①定义Json对象

语法:var json对象={key:value,key:value,...}

② 定义Json数组

语法:var json数组=[value,value,...]

<script type="text/javascript">
var data={"firstName":"Brett","lastName":"hehe"};
$.each(data,function(i,dom){
alert(dom);
}); /* var data={
"people":[
{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
]
};
$.each(data.people,function(i,dom){
alert(dom.firstName);
});
*/ </script>

那么即可拿到每个dom对象:

Ajax与jQuery、json的更多相关文章

  1. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

  2. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  3. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  4. Jquery Ajax方法传递json到action

    ajax向后台传入json需要设置option,如下 contentType:'application/json' data:Json.Stringify(jsObj) 后台处理复杂json对象(不知 ...

  5. 转载:Struts2+Jquery实现ajax并返回json类型数据

    摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...

  6. jquery ajax调用返回json格式数据处理

    Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...

  7. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  8. 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...

  9. struts1、ajax、jquery、json简单实例

    1.页面ajax代码,使用$.ajax,获得json对象后each $.ajax({ type:"GET", url:ctx + "/uploadImg.do" ...

  10. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

随机推荐

  1. [转]Android逆向之动态调试总结

    一.在SO中关键函数上下断点 刚学逆向调试时.大多都满足于在SO中某关键函数上下断点.然后通过操作应用程序,去触发这个断点,然后进行调试 详细的步骤可以参见非虫大大的<Android软件安全与逆 ...

  2. 自定义圆形控件 RoundImageView

    1.自定义圆形控件 RoundImageView package com.ronye.CustomView; import android.content.Context; import androi ...

  3. Android客户端与服务器

    就是普通的服务器端编程,还不用写界面,其实还比服务器编程简单一些.跟J2EE一样的服务器,你android这一方面只要用json或者gson直接拿数据,后台的话用tomcat接受请求操作数据,功能不复 ...

  4. android MediaPlayer的一些使用方法简历

    这里提供一些MediaPlayer的简单方法,方便以后熟练的使用它! 1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlay ...

  5. 我的Android第三章:Android的组件介绍

    小编摘录了Android文档介绍Android四大组件的基本内容,感觉文档的内容写的很详细所以小编将它写入了博客 Android 使用Java语言开发.Android SDK 工具编译代码-以及任意数 ...

  6. iOS开发之UISearchBar初探

    iOS开发之UISearchBar初探 UISearchBar也是iOS开发常用控件之一,点进去看看里面的属性barStyle.text.placeholder等等.但是这些属性显然不足矣满足我们的开 ...

  7. js简单解密(eval解密)

    今天看博客园文章,看到一篇比较好的文章. 今天又学会一招,可以对一些采用eval加密的js进行解密. 打开谷歌或者火狐浏览器,然后按 F12,接着把这代码复制进去, 最后,去掉开头 4 个字母 eva ...

  8. Sublime Text 收藏笔记

    Sublime Text:初学者不知道的那些事 转载自: http://blog.jobbole.com/23949/

  9. 服务器磁盘扩展卷时遭遇“There is not enough space available on the disk(s) to complete this operation.”错误

    在ESX VM的一台服务器由于磁盘空间告警,打算决定给E盘扩展空间,增加20G的空间,在操作过程遭遇了Expanding Disk Volume gives error "There is ...

  10. JVM知识点

    先发个链接到两位大牛的主页 http://rednaxelafx.iteye.com/               http://icyfenix.iteye.com/ 目录 1)概述 2)编译 3) ...