ajax 的核心思想

1、Ajax
　　特点：
　　局部刷新、提高用户的体验度，数据从服务器商加载

2、AJax的技术组成
　　不是新技术，而是之前技术的整合
　　Ajax: Asynchronous Javascript And Xml;
　　　　　　（异步的JavaScript和XML）
　　包括的技术：JavaScript、XML、CSS、XMLHttpRequest
　　异步：发送请求以后，不等结果，由回调函数处理。
　　JavaScript:向服务器发送请求，获得返回结果，更新页面
　　XML：用来封装数据

3、Ajax核心原理
　　XMLHttpRequst对象：通过该对象向服务器发送请求。
　　它是异步请求的技术，所有现代浏览器都支持（Chrome、IE5+）

　　1)创建XMLHttpReuest对象
　　　　非IE浏览器（Mozilla/Safari）：
　　　　var xhr=new XMLHttpRequest();
　　　　IE:
　　　　xhr=new ActiveXObject("Msxml2.XMLHTTP");
　　　　低版本IE:
　　　　xhr=new ActiveXObject("Microsfot.XMLHTTP");
　　2)XMLHttpRequest对象的属性与方法
　　　　a)方法：
　　　　　open("GET/POST",URL,true/false):用来向服务器建立连接
　　　　　　有三个参数:
　　　　　　参数1：提交方式，post或get
　　　　　　参数2：请求的URL
　　　　　　参数3：表示同步或异步请求，true:表示异步请求
　　　　　　false: 表示同步请求

　　　　　send(data):发送请求
　　　　　　参数：提交的内容。

　　　　　　POST方式:data就是提交的参数，send(username=root&password=abc123);

　　　　　　GET方式:send(null)

　　　b)属性：
　　　　onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。

　　　　　　onreadystatechange=function(){　　　　　　

　　　　　　｝

　　　　readyState:服务器状态响应
　　　　　　状态码：
　　　　　　0：未初始化
　　　　　　1：正在加载
　　　　　　2：加载完成
　　　　　　3：请求进行中
　　　　　　4：请求完成

　　　　responseText:服务器返回的数据(文本格式)

　　　　responseXML:服务器返回的数据（XML格式）

4.回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

ajax 的示例代码：

var url = "/test/check";
    $.ajax({
        type: "post",
        url: url,
//      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
        data: {"para":1},
        cache: false,
        async : false,
        dataType: "json",
        success: function (data ,textStatus, jqXHR)
        {
            if("true"==data.flag){
               alert("合法！");
                return true;
            }else{
                alert("不合法！错误信息如下："+data.errorMsg);
                return false;
            }
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {      
            alert("请求失败！");
        }
     });

java 代码：

/**
     * 校验
     *
     * @return void
     */
    public void check(){
        Map<String,String> result = new HashMap<String,String>();
        boolean flag = false;
        try{
            String para= getPara("para");
            //校验 代码...
            result.put("flag", "true");
            renderJson(result);//返回json数据
        }catch(Exception e){
            result.put("flag", flag+"");
            result.put("errorMsg", e.getMessage());
            renderJson(result);//返回json数据
            e.printStackTrace();
        }
    }

总结：
使用XMLHttpRequest的步骤：
　　1)创建XMLHttpRequest对象
　　2）设置请求的方法及URL
　　　　xhr.open("GET/POST","url",true/false),true表示异步请求，false表示同步请求
　　3)设置状态改变时的回调函数
　　　　xhr.onreadystatechange=function(){}
　　　　0:未初始化
　　　　1:正在加载
　　　　2:加载完成
　　　　3：请求进行中
　　　　4：请求完成
　　4）发送请求
　　　　xhr.send(data),
　　　　如果为post提交，则data为提交的数据，如果为get提交，则参数为null即可。

猜你喜欢