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)
 request.setCharacterEncoding("utf-8");

 response.setHeader("content-Type", "text/html;charset=utf-8");

 // 读取参数

 String mail = request.getParameter("mail");

 System.out.println("debug:mail:" + mail);

 String result = "false";

 if (mail.equalsIgnoreCase("qq")) {

     result = "true";

 }

 // 输出结果

 PrintWriter out = response.getWriter();

 out.print(result);

 out.flush();

JS代码(j_1)
 /**

  * 创建xmlHttpRequest对象

  *

  * 兼容版本

  *

  * 开发时间：2016-5-18 上午10:00:49

  * @author MrFalse

  */

 function createXMLHttpRequest(){

     //  定义变量

     var request=null;

     if(window.XMLHttpRequest){

         request=new XMLHttpRequest();

     }else{

         //  兼容早期IE5、IE6浏览器

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

     }

     return request;

 }

 /**

  * 验证邮箱

  *

  *

  * 开发时间：2016-5-18 上午10:05:07

  * @author MrFalse

  * @param oInput

  */

 function checkUserName(oInput){

     //  读取输入框的的值

     var strUserName=oInput.value;

     if(strUserName==null||strUserName==""){

         userNameMessage.innerHTML="邮箱不能为空";

         return;

     }

     //  创建XMLHttpRequest对象

     var xmlHttpRequest=createXMLHttpRequest();

     //  设置回调函数

     xmlHttpRequest.onreadystatechange=function(){

         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){

             var strReturnString=xmlHttpRequest.responseText;

             if(strReturnString.indexOf("true")>=0){

                 userNameMessage.innerHTML="用户名已经被占用";

                 userNameMessage.className="red";

             }else{

                 userNameMessage.innerHTML="用户名可以使用";

                 userNameMessage.className="blue";

             }

         }

     }

     var url="RegisterServlet";

     xmlHttpRequest.open("post",url,true);

     //  设置头信息

     xmlHttpRequest.setRequestHeader("Content-Type",

             "application/x-www-form-urlencoded;charset=utf-8");

     //  参数数据,使用key=value&key=value……的方式

     var urlParam="mail="+strUserName;

     //发送请求

     xmlHttpRequest.send(urlParam);

 }

HTML代码(h_1)

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>注册页面</title>

 <script type="text/javascript" src="register.js"></script>

 <style type="text/css">

 .blue{

     color: blue;

     font-weight: normal;

 }

 .red{

     color: red;

     font-weight: bold;

 }

 </style>

 </head>

 <body>

     <form action="">

         <p>注册邮箱：<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>

     </form>

 </body>

 </html>
 
jQuery实现Ajax
    jquery常用Ajax方法
$.ajax()  综合的请求，比较强大，功能较全，但是复杂
$.get() get方式请求，但是带参数时转为post请求
$.post() post方式请求
$.getJSON() 获取服务器返回的json数据
$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
    使用$.ajax()
        1.服务器代码使用上面代码（s_1）
        2.html代码(h_2)
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>ajax请求jquery</title>

 </head>

 <body>

     <form action="">

         <p><input type="text" name="email" id="email" onblur="requestxx(this);"/>

               <span id="prompt">*</span>

        </p>

     </form>

 </body>

 </script>

 </html>
        3.为h_1添加jquery代码如下
 
encodeURI(thisobj.value)使用情况
1.get模式时
2.传参是url模式
3.参数中有中文
jq_1
 <!-- 导入jquery库 -->

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

 <script type="text/javascript">

     function requestxx(thisobj){

         //对中文进行uri编码

         email=encodeURI(thisobj.value);

         $.ajax({

             url:"RegisterServlet",

             type:"get",

             data:"mail="+email,

             //执行成功的回调函数

             success:function(result,textStatus){

                 if(result.indexOf("true")>=0){

                     $("#prompt").text("用户名已经被占用");

                 }else{

                     $("#prompt").text("用户名可以使用");

                 }

             },

             //执行失败或错误的回调函数

             error:function(){

                 alert("ajax执行失败");

             }

         });

     }

 </script>
        使用$.get()
        1.服务器代码使用上面代码（s_1）
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下
jq_2
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

 <script type="text/javascript">

     function check(input){

         $.get("RegisterServlet","mail="+input.value,function(result){

             if(result.indexOf("true")>=0){

                 $("#prompt").text("用户名已经被占用");

             }else{

                 $("#prompt").text("用户名可以使用");

             }

         });

     }

 </script>

使用$.post()

        1.服务器代码使用上面代码（s_1）
        2.html代码使用上面代码(h_2)
        3.为h_2添加jquery代码如下

jq_3

 <script type="text/javascript">

     function check(input){

         $.post("RegisterServlet","mail="+input.value,function(result){

             if(result.indexOf("true")>=0){

                 $("#prompt").text("用户名已经被占用");

             }else{

                 $("#prompt").text("用户名可以使用");

             }

         });

     }

 </script>

使用$.getJSON()

        1.服务器代码(s_2 Servlet)
 request.setCharacterEncoding("utf-8");

 //两种响应头都可以使用

 response.setHeader("Content-Type", "application/json;charset=utf-8");

 //response.setHeader("content-Type", "text/html;charset=utf-8");

 PrintWriter out=response.getWriter();

 //返回的json格式必须是严格的json格式，否则浏览器无法调用

 out.print("{\"name\":\"张三\"}");

 out.flush();
        2.html代码
h_3
 <button onclick="clickTest()">提交</button>
        3.为h_2添加jquery代码如下
jq_4
 <script type="text/javascript">

     function clickTest() {

         $.getJSON("ResponseJSON",function(data) {

             alert(data.name);

         })

     }

 </script>
使用$(selecter).load() 
            1.使用上面服务器代码s_2
            2.html代码使用上面代码(h_2)
            3.为h_2添加jquery代码如下
jq_5
 <script type="text/javascript">

     function check(input){

         $("#prompt").load("RegisterServlet","mail="+input.value);

     }

 </script>
注意：
  1. 一定要注意JSON字符串的书写格式，如果传入的字符串不是JSON格式，如果传入的字符串不是JSON格式或者格式错误，将不能得到正确的值。
  2. 使用$.getJSON()方法时，默认从服务器接收到的数据就是JSON对象，不需要再使用$.parseJSON()方法去解析即可使用
        $.parseJSON(str)的使用
demo
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>jqueryParseJSON</title>

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

 <script type="text/javascript">

     function test() {

         //json的字符串

         var jsonStr = '{"name":"张三","age":20}';

         //解析成json对象

         var jsonObj = $.parseJSON(jsonStr);

         alert("name:" + jsonObj.name + "age:" + jsonObj.age);

     }

 </script>

 </head>

 <body>

     <button onclick="test()">测试</button>

 </body>

 </html>

result:

 
 
 
 

初识Ajax技术的更多相关文章

  1. ajax技术初识与应用

    一.ajax技术初识 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编 ...

  2. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  3. Django补充及初识Ajax

    Django创建一对多表结构 首先现在models.py中写如下代码: from django.db import models # Create your models here. class Bu ...

  4. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  5. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  6. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  7. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

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

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  9. ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...

随机推荐

  1. odoo view field option， action flage 参数

    options JSON object specifying configuration option for the field's widget (including default widget ...

  2. NLP相关资源

    一 NLP相关资源站点 Rouchester大学NLP/CL会议列表 一个非常好的会议时间信息网站,将自然语言处理和计算语言学领域的会议,按照时间月份顺序列出. NLPerJP 一个日本友好人士维护的 ...

  3. vm拷贝cloudera-scm-agent造成问题

    ------------网络问题---------- ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting  ...

  4. 会声会影X6-高级运动等效果的练习实践-与您分享...

          视频片说明:我在学习X6的视频教程后,做了针对性练习与实 践,我所用的素材取于网络世界-百度下载,视频中的效果有,高级运动;平移缩放,分屏效果,<运用:关键帧,缩放,旋转,加相框,倒 ...

  5. hadoop job执行完的统计信息

    Total committed heap usage (bytes)= Physical memory (bytes) snapshot= Virtual memory (bytes) snapsho ...

  6. [HDOJ 5155] Harry And Magic Box

    题目链接:HDOJ - 5155 题目大意 有一个 n * m 的棋盘,已知每行每列都至少有一个棋子,求可能有多少种不同的棋子分布情况.答案对一个大素数取模. 题目分析 算法1: 使用容斥原理与递推. ...

  7. java 对象序列化 RMI

    对于一个存在于Java虚拟机中的对象来说,其内部的状态只保持在内存中.JVM停止之后,这些状态就丢失了.在很多情况下,对象的内部状态是需要被持久化下来的.提到持久化,最直接的做法是保存到文件系统或是数 ...

  8. Grails架设和配置--起步

    现在作这些配置有些轻车熟路了.. 因为RAILS ON RUBY和它真的有很多相像的,, 什么DRY,什么约定先于配置这些的概念... 然后,GITHUB上有好文档,可以一步一步的实践.. https ...

  9. JVM中内存回收深入分析，各种垃圾收集器

    JVM启动有两种模式,client和server 一般JVM启动时会根据主机情况分析选择采用那种模式启动 可发现是server模式 JVM中尤其需要关注的就是HEAP堆区 堆区分为新生代和老年代 新生 ...

  10. struts2的action访问servlet API的三种方法

    学IT技术,就是要学习... 今天无聊看看struts2,发现struts2的action访问servlet API的三种方法: 1.Struts2提供的ActionContext类 Object g ...