初识Ajax技术

Ajax:(Asynchronous JavaScript And Xml)是一种整合了JavaScript、XML、CSS等现有技术

Ajax工作流程:

纯javaScript的Ajax请求

XMLHttpRequest

XMLHttpRequest对象可以提供在不刷新当前页面的情况下向服务器发送异步请求,并接收服务器端的返回结果。

        1.创建XMLHttpRequest对象语法

老版本IE(IE5和IE6)

XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

新版本IE和其他大部分浏览器(推荐使用)

XMLHttpRequest = new XMLHttpRequest();

          2.XMLHttpRequest对象常用属性和方法

           常用属性

属性名称
说明

readyState

返回请求的当前状态

常用值:

0——未初始化

1——开始发送请求

2——请求发送完成

3——开始读取相应

4——读取响应结束


status

HTTP相应状态码:

200——相应正常

400——错误请求,如语法错误

403——没有访问权限

404——资源不存在

500——服务器内部错误


responseText

以文本形式获取相应值

responseXML

以XML形式获取相应值,并且解析成DOM对象返回
statusText
返回当前请求的相应行状态
onreadystatechange
设置回调函数

常用方法


方法

说明

open(String method,String url,boolean async,String user,String password)
用于创建一个新的HTTP请求
参数method:设置HTTP请求方法,如POST、GET等,不区分大小写
参数url:请求的url地址(如果是get请求,参数在这里拼接)
参数async:可选,指定此请求是否为异步方法,默认为true
参数user:可选,如果服务器需要验证,此处指定用户名,否则弹出验证窗口
参数password:可选,验证中的密码

send(String data)

发送请求到服务器端

参数data:字符串类型,通过此请求发送的数据。POST方式需要指定,GET方式则不指定


abort()

取消当前请求

setRequestHeader(String header,String value)
单独设置请求的某个HTTP头信息
参数header:要指定的HTTP头名称
参数value:要指定的HTTP头名称所对应的值
常用的:setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")

getResponseHeader(String header)

从响应中获取指定的HTTP头信息

参数header:要获取指定的HTTP头


getAllResponseHeaders()
获取相应的所有的HTTP头信息

服务器主要代码(s_1  servlet)

 1 request.setCharacterEncoding("utf-8");
 2 response.setHeader("content-Type", "text/html;charset=utf-8");
 3 // 读取参数
 4 String mail = request.getParameter("mail");
 5 System.out.println("debug:mail:" + mail);
 6 String result = "false";
 7 if (mail.equalsIgnoreCase("qq")) {
 8     result = "true";
 9 }
10 // 输出结果
11 PrintWriter out = response.getWriter();
12 out.print(result);
13 out.flush();

JS代码(j_1)

 1 /**
 2  * 创建xmlHttpRequest对象
 3  *
 4  * 兼容版本
 5  *
 6  * 开发时间:2016-5-18 上午10:00:49
 7  * @author MrFalse
 8  */
 9 function createXMLHttpRequest(){
10     //  定义变量
11     var request=null;
12     if(window.XMLHttpRequest){
13         request=new XMLHttpRequest();
14     }else{
15         //  兼容早期IE5、IE6浏览器
16         request=new ActiveXObject("Microsoft.XMLHTTP");
17     }
18     return request;
19 }
20 /**
21  * 验证邮箱
22  *
23  *
24  * 开发时间:2016-5-18 上午10:05:07
25  * @author MrFalse
26  * @param oInput
27  */
28 function checkUserName(oInput){
29     //  读取输入框的的值
30     var strUserName=oInput.value;
31     if(strUserName==null||strUserName==""){
32         userNameMessage.innerHTML="邮箱不能为空";
33         return;
34     }
35     //  创建XMLHttpRequest对象
36     var xmlHttpRequest=createXMLHttpRequest();
37     //  设置回调函数
38     xmlHttpRequest.onreadystatechange=function(){
39         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
40             var strReturnString=xmlHttpRequest.responseText;
41             if(strReturnString.indexOf("true")>=0){
42                 userNameMessage.innerHTML="用户名已经被占用";
43                 userNameMessage.className="red";
44             }else{
45                 userNameMessage.innerHTML="用户名可以使用";
46                 userNameMessage.className="blue";
47             }
48         }
49     }
50     var url="RegisterServlet";
51     xmlHttpRequest.open("post",url,true);
52     //  设置头信息
53     xmlHttpRequest.setRequestHeader("Content-Type",
54             "application/x-www-form-urlencoded;charset=utf-8");
55     //  参数数据,使用key=value&key=value……的方式
56     var urlParam="mail="+strUserName;
57     //发送请求
58     xmlHttpRequest.send(urlParam);
59 }

HTML代码(h_1)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>注册页面</title>
 6 <script type="text/javascript" src="register.js"></script>
 7 <style type="text/css">
 8
 9 .blue{
10     color: blue;
11     font-weight: normal;
12 }
13
14 .red{
15     color: red;
16     font-weight: bold;
17 }
18 </style>
19 </head>
20 <body>
21     <form action="">
22         <p>注册邮箱:<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
23     </form>
24 </body>
25 </html>

jQuery实现Ajax

jquery常用Ajax方法

$.ajax()  综合的请求,比较强大,功能较全,但是复杂

$.get() get方式请求,但是带参数时转为post请求
$.post() post方式请求

$.getJSON() 获取服务器返回的json数据

$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中

    使用$.ajax()

1.服务器代码使用上面代码(s_1)

2.html代码(h_2)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>ajax请求jquery</title>
 6 </head>
 7 <body>
 8     <form action="">
 9         <p><input type="text" name="email" id="email" onblur="requestxx(this);"/>
10               <span id="prompt">*</span>
11        </p>
12     </form>
13 </body>
14 </script>
15 </html>

3.为h_1添加jquery代码如下

encodeURI(thisobj.value)使用情况

1.get模式时

2.传参是url模式

3.参数中有中文

jq_1

 1 <!-- 导入jquery库 -->
 2 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 3 <script type="text/javascript">
 4     function requestxx(thisobj){
 5         //对中文进行uri编码
 6         email=encodeURI(thisobj.value);
 7         $.ajax({
 8             url:"RegisterServlet",
 9             type:"get",
10             data:"mail="+email,
11             //执行成功的回调函数
12             success:function(result,textStatus){
13                 if(result.indexOf("true")>=0){
14                     $("#prompt").text("用户名已经被占用");
15                 }else{
16                     $("#prompt").text("用户名可以使用");
17                 }
18             },
19             //执行失败或错误的回调函数
20             error:function(){
21                 alert("ajax执行失败");
22             }
23         });
24     }
25 </script>

使用$.get()

1.服务器代码使用上面代码(s_1)

2.html代码使用上面代码(h_2)

3.为h_2添加jquery代码如下

jq_2

 1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 2 <script type="text/javascript">
 3     function check(input){
 4         $.get("RegisterServlet","mail="+input.value,function(result){
 5             if(result.indexOf("true")>=0){
 6                 $("#prompt").text("用户名已经被占用");
 7             }else{
 8                 $("#prompt").text("用户名可以使用");
 9             }
10         });
11     }
12 </script>

使用$.post()

1.服务器代码使用上面代码(s_1)

2.html代码使用上面代码(h_2)

3.为h_2添加jquery代码如下

jq_3

 1 <script type="text/javascript">
 2     function check(input){
 3         $.post("RegisterServlet","mail="+input.value,function(result){
 4             if(result.indexOf("true")>=0){
 5                 $("#prompt").text("用户名已经被占用");
 6             }else{
 7                 $("#prompt").text("用户名可以使用");
 8             }
 9         });
10     }
11 </script>

使用$.getJSON()

1.服务器代码(s_2 Servlet)

1 request.setCharacterEncoding("utf-8");
2 //两种响应头都可以使用
3 response.setHeader("Content-Type", "application/json;charset=utf-8");
4 //response.setHeader("content-Type", "text/html;charset=utf-8");
5 PrintWriter out=response.getWriter();
6 //返回的json格式必须是严格的json格式,否则浏览器无法调用
7 out.print("{\"name\":\"张三\"}");
8 out.flush();

2.html代码

h_3

1 <button onclick="clickTest()">提交</button>

3.为h_2添加jquery代码如下

jq_4

1 <script type="text/javascript">
2     function clickTest() {
3         $.getJSON("ResponseJSON",function(data) {
4             alert(data.name);
5         })
6     }
7 </script>

使用$(selecter).load() 

1.使用上面服务器代码s_2

2.html代码使用上面代码(h_2)

3.为h_2添加jquery代码如下

jq_5

1 <script type="text/javascript">
2     function check(input){
3         $("#prompt").load("RegisterServlet","mail="+input.value);
4     }
5 </script>

注意:

  1. 一定要注意JSON字符串的书写格式,如果传入的字符串不是JSON格式,如果传入的字符串不是JSON格式或者格式错误,将不能得到正确的值。
  2. 使用$.getJSON()方法时,默认从服务器接收到的数据就是JSON对象,不需要再使用$.parseJSON()方法去解析即可使用

        $.parseJSON(str)的使用

demo

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>jqueryParseJSON</title>
 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7 <script type="text/javascript">
 8     function test() {
 9         //json的字符串
10         var jsonStr = ‘{"name":"张三","age":20}‘;
11         //解析成json对象
12         var jsonObj = $.parseJSON(jsonStr);
13         alert("name:" + jsonObj.name + "age:" + jsonObj.age);
14     }
15 </script>
16 </head>
17 <body>
18     <button onclick="test()">测试</button>
19 </body>
20 </html>

result:

时间: 2024-10-15 21:05:45

初识Ajax技术的相关文章

ajax技术初识与应用

一.ajax技术初识 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编程语言,而是使用现有标准的新方法.AJAX可以在不重新加载整个页面的情况下,与服务器交换数据.这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据.使用Ajax,用户可以创建接近本地桌面应用的直接.高可用.更丰富.更动态的Web用户界面. Ajax技术包括: XHTML和CSS 使用文档对象

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

Web应用程序开发,基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术. 本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面.由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看).所以使用 Ajax 技术是必须的.但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开

Ajax技术详解

Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpRequest构造函数,它定义了用脚本操纵HTTP的API. XMLHttpRequest构造函数:每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据.需要注意的是当你重用已存在的XMLHttpRequest,

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X

对AJAX技术的理解,创建,与应用

ajax的理解: 1. ajax是介于客户端与服务器端之间的一个机制,但这一机制是在前台的,利用前台的闲置功能,来进行前台与后台的数据交流,以达到增强用户体检,减少服务器压力,更有效的利用带宽的效果. 2. ajax是采用异步交互的机制. 3. ajax使用于页面局部刷新,按需求验证和取数据. 4. ajax缺点便是浏览器的兼容问题麻烦,与嵌入式移动端对ajax的支持不太理想. 5.ajax已经是一种web开发必备的技术,而且其优点远大于缺点. 6.ajax涉及到的主要技术有7种其中Javasc

Ajax技术基础

对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异步访问服务器. 在通常情况下,我们的页面都是静态的,如果想要与服务器交互,我们可以通过一系列的手段来向服务器发送请求,并将返回的信息展示在页面上,但是通常需要刷新页面,如果不停的请求就需要不停的刷新整个页面,这对于客户而言带来很大的麻烦,尤其是网速很慢的情况,本来只需要更改页面一小点地方的信息,却要