ajax异步请求

 

ajax 简介 作者：837750513@qq.com

 

asynchronous javaScript and xml

同步传输遇到的问题：客户端在向服务器传输数据之后需要等待服务器给客户端发出响应或返回参数，原网页在用户等待返回的过程中被销毁，十分影响用户体验。同时会传输大量冗余数据。

服务器在收到提交之后，给客户端返回一个和原网页一样的注册页面，并弹出提示信息，让用户知道提交的信息获得了服务器的接收，但此时服务器才开始慢慢处理发送过来的数据。

引入ajax:在用户提交账号密码的同时，客户端提示这个账号已被占用，请使用其他账号。

账号在输入回车之后将光标跳转到下面的密码，绑定响应函数，失去焦点。

ajax使用流程：

在用户填写输入框后，在事件处理对象中，通过注册框中获取ajax对象，ajax对象会向服务器发送异步请求，用户可以继续填写其他信息，互不影响。服务器中使用servlet处理，访问数据库进行查询比对注册信息。在必要的时候向客户端返回部分数据：文本或xml  使用json数据类型进行返回。

这里存在一个事件处理函数，事先绑定在ajax对象中，在收到服务器的数据之后触发函数，函数首先获取服务器返回的数据，并且使用数据对当前页面进行更新。（您的输入的账号已被占用，请重新输入）。

定义：是一种用来改善用户体验的技术，本质上是利用浏览器提供的一个特殊对象（XmlHttpRequest对象），向服务器发送异步请求。服务器返回部分数据，浏览器利用返回的数据对当前页面更新，页面无刷新，并且不打断用户的操作。

异步请求指的是 当ajax对象发送请求时，浏览器不会销毁当前页面，用户依然可以对当前页面做其他操作。

 

 

ajax发送异步请求 作者： 837750513@qq.com

浏览器中xmlRequest向服务器发送异步请求，注册页面还在，servlet只需要返回部分数据，浏览器利用这些数据通过事先绑定在ajax对象的事件处理函数对当前页面进行一定的更新。

改善用户体验的技术，整个过程不打断用户操作，返回的数据不冗余，可以提升性能。

编程步骤：

1，获得ajax对象

var xhr =getXhr();

2 ，调用ajax对象的方法发请求

xhr.open('get','check.do?adminCode='+$F('adminCode'),true);

xhr.onreadystatechange=f1;

xhr.send(null);

3编写服务器端的代码

out.println()

4,编写事件处理函数

function  f1(){

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

var txt=xhr.responseText;

$('msg').innerHTML=txt;

//更新页面

}

}



function $(id){

return document.getElementById(id);

}

function $F(id){

return $(id).value;

}

 

ajax 如何获取ajax对象 对象的重要性 作者： 837750513@qq.com

 

1. ie5.5         ActiveXObject

2. chorme firebox   XmlHttpRequest

3. w3c  XMLHttpRequest

function  getxhr(){
var xhr=null;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('MicroSoft.XMLHTTP')；
}
return xhr；
}

使用javaScript将获取到的ajax对象显示出来

<a href="javascript:alert(getXhr());">ClickMe</a>

ajax的重要属性

onreadystatechange：绑定事件处理函数 ，用来处理readystatechange事件。

readyState：五个值，用来获取ajax对象与服务。查看ajax与服务器通信的状态。

0，1，2，3，4   当readyState的值等于4时，ajax对象获取到服务器返回的数据。

当ajax对象readyState属性值改变，就会产生readystatechange事件。

responseTest:获得服务器返回的文本数据

responseXML：获得服务器返回的XML数据

status：获得状态码

200正常404 找不到资源500出错 302 重定向

ajax发送异步请求 作者：837750513@qq.com

编程步骤：

step1

先获得ajax对象

expL：var xhr=getXhr();

step2：

调用ajax对象的方法发送请求

方式一get请求

xhr.open('get','check.do？adminCode=king'，true);

true异步  浏览器不会销毁当前的页面，用户在数据没有发送回客户端之前就可以操作页面。

false 同步 会锁定页面直到收到返回的数据

xhr.onreadystatechange=f1;

绑定事件处理函数。当事件产生，即服务器端传递回客户端数据，f1执行。

xhr.send(null);

发送异步请求

step3：编写服务器端的程序

我们不需要返回完整页面，只需要返回部分数据。

step4：编写事件处理函数

先判断ajax对象是否获取到传递的数据

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

//ajax对象完整获得服务器所有的数据。

var txt=xhr.responseText;
}

 

---

1，获取ajax对象

function getXhr(){

    var xhr=null;

    if(window.XMLHttpRequest)

    {

    xhr=new XMLHttpRequest();

    }

    else{

    xhr=new ActiveXObject('MicroSoft.XMLHttp');

    }

    return xhr;

    }function getXhr(){

    var xhr=null;

    if(window.XMLHttpRequest)

    {

    xhr=new XMLHttpRequest();

    }

    else{

    xhr=new ActiveXObject('MicroSoft.XMLHttp');

    }

    return xhr;

    }

2，调用ajax对象中的方法发送请求

function check(){

    //1 获得ajax对象

var xhr=getXhr();

    alert(xhr);

    //2调用ajax对象中的方法发送请求

    xhr.open('get','check.do?userName='+$F('userName'),true);

    xhr.onreadystatechange=f1;

    xhr.send(null);

}

3，编写服务器端的程序

package com.Servlet;



import java.io.IOException;

import java.io.PrintWriter;



import javax.servlet.ServletException;



import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



/**

* Servlet implementation class ActionServlet

*/



@SuppressWarnings("serial")

public class ActionServlet extends HttpServlet {



    @Override

    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        System.out.println("service()");

        String uri = request.getRequestURI();

        System.out.println("uri:" + uri);

        String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));

        System.out.println("action:" + action);

        response.setContentType("text/html,charset=UTF-8");

        response.setCharacterEncoding("UTF-8");// 向jsp中输出转码全部为utf-8

        PrintWriter out = response.getWriter();

        if ("/check".equals(action)) {

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

            String userName1 = new String(userName.getBytes("ISO-8859-1"), "UTF-8");// 转码 解码用iso,转码用utf-8

            System.out.println("userName:" + userName1);



            if ("张".equals(userName1)) {

                out.println("账号已经存在");



            } else {



                out.print("可以使用账号");



            }

        }

    }



}

4，编写事件处理函数

function(){

           //4,书写事件处理函数获取收到的数据

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

               

               var txt=xhr.responseText;

               alert(txt);

               $('msg').innerHTML=txt;

               

            }

               

       

    };