Ajax学习笔记

【AJAX的概述】

 AJAX的概念:

 

AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.

* 传统方式的开发：所有的数据提交到服务器端进行处理.(胖服务器)

* AJAX的方式开发：有一部分的代码写在客户端.

 

 AJAX的作用：

完成页面局部刷新而不影响用户的体验.

* 用户名是否已经存在的校验

* 百度信息输入的提示

...

使用AJAX：

JavaScript和XML

* XMLHttpRequest:

   * 属性：

        * onreadystatechange:

        * readyState:

      

        * status:获得状态码

        * responseText   :响应的文本

        * responseXML    :响应的XML

   * 方法:

        * open(“请求方式”,”请求路径”,”是否异步”);

        * send(“提交的参数”);

        * setRequestHeader(“头信息”,”头的值”);

 

开发步骤：

1.获得XMLHttpRequest对象.

   * IE将XMLHttpRequest封装到一个ObjectXActive插件中.

   * Firefox直接可以创建XMLHttpRequest.

2.设置状态改变触发一个函数.

3.打开一个链接.

4.发送请求.

【AJAX的GET入门】

创建XMLHttpRequest

function createXMLHttpRequest() {

    varxmlHttp;

    try{ // Firefox, Opera 8.0+, Safari

        xmlHttp= new XMLHttpRequest();

    }catch (e) {

        try{// Internet Explorer

            xmlHttp= new ActiveXObject("Msxml2.XMLHTTP");

        }catch (e) {

            try{

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

            }catch (e) {

            }

        }

    }

 

    returnxmlHttp;

}

 

AJAX的代码：

function loadData() {

    //1.创建异步XMLHttpRequest对象

    varxhr = createXMLHttpRequest();

    //2.设置状态改变触发一个函数

    xhr.onreadystatechange= function(){

        //回调函数.

        if(xhr.readyState== 4){// 请求发送完成

            if(xhr.status== 200){// 响应也正确

                vardata = xhr.responseText;

                document.getElementById("d1").innerHTML=data;

            }

        }

    }

    //3.打开一个连接：

    xhr.open("GET","/WEB15/ServletDemo1",true);

 

    //4.发送请求

    xhr.send(null);

}

【AJAX的POST入门】

function loadData(){

    //1.创建异步对象

    varxhr = createXMLHttpRequest();

    //2.设置状态改变触发的函数

    xhr.onreadystatechange= function(){

        if(xhr.readyState== 4){

            if(xhr.status== 200){

                document.getElementById("d1").innerHTML=xhr.responseText;

            }

        }

    }

    //3.打开连接

    xhr.open("POST","/WEB15/ServletDemo2",true);

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //4.发送数据

    xhr.send("name=李四&password=456");

}

【Jquery的AJAX部分的概述】

由于传统AJAX开发代码比较麻烦,而且还有浏览器兼容的问题.传统的AJAX的使用在企业中是很少的.使用AJAX的一些框架完成.

 

JQuery的AJAX部分的API：

* $(“”).load(url,data,function(){});

* $.get(url,data,function(){},dataType);

*$.post(url,data,function(){},dataType);

* $.ajax();

【Jquery的AJAX的部分的使用】

引入JQuery的JS.

【Jquery的AJAX的部分的入门】

// jquery的load方法

$(function(){

    //给按钮1绑定一个click事件：

    $("#bt1").click(function(){

        $("#d1").load("/WEB15/ServletDemo4",{"name":"张三","password":"123"},function(data){

            if(data== 1){

                $(this).html("张三");

            }else{

                $(this).html("其他");

            }

        });

    });

});

 

// 使用jquery的get方法:

$(function(){

    $("#bt2").click(function(){

        $.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){

            $("#d2").html(data);

        });

    });

});

 

//使用jquery的post方法:

$(function(){

    $("#bt3").click(function(){

        $.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){

            $("#d3").html(data);

        });

    });

});

 

// 使用jquery的ajax方法:

$(function(){

    $("#bt4").click(function(){

        $.ajax({

            type:"post",

            url:"/WEB15/ServletDemo4",

            data:"name=aaa&password=123",

            success:function(data){

                $("#d4").html(data);

            }

           

        });

    });

});