原生Ajax和JQuery实现Ajax

认识Ajax　　

　　在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断地刷新页面。在等待期间，由于新的页面没有生成，整个浏览器将是一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，频繁的刷新页面也会使服务器的负担加重。

　　Ajax技术正是为了弥补以上不足而诞生的。Ajax应用使用JavaScript异步发送请求，不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器响应完成后，再使用JavaScript将响应展示给用户。

　　使用Ajax技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰。而且我们可以在必要的时候只更新页面的一小部分，而不用刷新整个页面，即“无刷新”技术。

 

Ajax简介

　　Ajax(Asynchronous JavaScript and XML)并不是一种全新，而是由JavaScript、XML、CSS等几种现有技术整合而成。Ajax的执行流程是，用户界面触发事件调用JavaScript，通过Ajax引擎——XMlHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

　　>JavaScript语言，Ajax技术的主要开发语言。

　　>XML / JSON / HTML等：用来封装请求或响应的数据格式。

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

　　>CSS：改变样式，美化页面效果，提升用户体验度。

　　>Ajax引擎：即XMLHttpRequest对象，已异步方式在客户端与服务器端之间传递参数。

 

原生Ajax使用方式

1.使用Ajax发送GET请求

//1.创建XMLHttpRequest对象
if(windows.XMLHttpRequest){//返回值为true时说明是新版本
    xr = new XMLHttpRequest();
}else{//返回值为false时说明是老版本IE浏览器(IE5 和 IE6)
    xr = new ActiveXObject("Microsoft.XMLHTTP");   
}

//2.设置回调函数
xr.onreadystatechange = callBack;

//3.初始化XMLHttpRequest组件
var url = "Servlet?name="+name;//服务器端URL地址,name为用户名文本框获取的值
xr.open("GET",url,true);

//4.发送请求
xr.send(null);

//回调函数callBack()中处理服务器响应的代码
function callBack(){
     //当请求状态为4，同时http状态码为200时，表示成功接收到服务器端发送的数据
    if(xr.readyState==4  &&  xr.status==200){
        var data = xr.responText;//接收servlet中的返回值。
        //之后根据返回值选择做功。
    }
}    

 

2.使用Ajax发送POST请求

//1.创建XMLHttpRequest对象
 if(windows.XMLHttpRequest){//返回值为true时说明是新版本
     xr = new XMLHttpRequest();
}else{//返回值为false时说明是老版本IE浏览器(IE5 和 IE6)
     xr = new ActiveXObject("Microsoft.XMLHTTP");   
}
//2.设置回调函数
xr.onreadystatechange = callBack;

//3.初始化XMLHttpRequest对象
var url = "Servlet";//服务器端URL地址
xr.open("POST",url,true);//初始化请求
xr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求头，定死不变的

//4.发送请求
var data = "name="+name;//设置需要传递的参数
xr.send(data);//发送出去

//回调函数

21 function callBack(){

22      //当请求状态为4，同时http状态码为200时，表示成功接收到服务器端发送的数据
23     if(xr.readyState==4  &&  xr.status==200){
24         var data = xr.responText;//接收servlet中的返回值。
25         //之后根据返回值选择做功。
26     }
27 }

 

使用JQuery实现Ajax

　　$.ajax()方法

$.ajax({
    "url"           :  "Servlet",//要提交的URL路径
    "type"          :  "post",//发送请求的方式
    "data"          :  "uname="+name,//要发送到服务器的数据
    "dataType"      :  "text",//指定返回的数据格式
    "success"       :  callback//响应成功后要执行的代码
    "error"         :  function(){//请求失败后要执行的代码}
    });
                    
    //$.ajax的回调函数带参数
    //这个参数data就是后台的返回值
    function callback(data){
    if(data=='true'){
    alert('该用户名可用');
    }else{
    alert('该用户名已被注册')
    }
}

 

 

servlet发送返回值用out.print();