AJAX基础

AJAX

AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）

AJAX是一种无需重新加载整个网页的情况下，能够更新页面部分内容的新方法

他不是一种新的编程语言，而是多种技术的综合使用

核心：JavaScript和xml（json）：使用JavaScript操作异步对象XMLHttpRequest

和服务器交换使用json数据格式（以前是xml 但xml重量 难解析）

异步对象XMLHttpRequest属性和方法

1.创建异步对象

var xhr = XMLHttpRequest();

2.XMLHttpRequest方法

1）open（请求方法，服务器端的访问地址，异步还是同步）

xhr.open("get","login",true);

2）send（）；使用异步对象发送请求

3.XMLHTTPRequest属性

readystate属性：请求状态

        0：表示创建异步对象时（正在创建异步对象），new XMLHttpRequest();

        1：表示初始异步对象的请求参数，执行open（）方法

        2：使用send（）方法发送请求

        3：使用异步对象从服务器接收了数据

        4：异步对象接收了数据，并在异步对象内部处理完成后

status属性：网络状态，和Http的状态码对应

        200：请求成功

        404：服务器资源没有找到

        500：服务器内部代码有错误

responseText属性：表示服务器端返回的数据

var data = xhr.responseText;

4.异步对象XMLHTTPRequest使用步骤

1）使用js创建异步对象

var xhr = XMLHttpRequest();

2）给异步对象绑定事件，事件名称onreadystatechange

      例如button增加单击事件onclick

xhr绑定事件

xhr.onreadystatechange = function(){
    当事件发生时执行的代码
}

在绑定事件中做什么？根据readyState值做请求处理

xhr.readystatechange = function(){
    if(xhr.readystatechange == 4 && xhr.status == 200){
        //从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
        var data = xhr.responseText;
        //更新dom对象
        document.getElementById("#mydiv").innerHTML = data;
    }
}

3）初始请求的参数，执行open()函数

xhr.open("get","loginServlet",true);

4）发送请求，执行send()

xhr.send();

5.第一个例子

使用全局刷新，实现计算bmi

可以使用jsp显示request作用域中的数据，使用el表达式

也可使用HttpServletResponse对象输出数据，数据给了浏览器。浏览器可以接受HTTPServletResponse对象print的数据

6.同步请求和异步请求

看open(请求方式，访问url地址，boolean是不是异步的)

true：异步请求

false：同步请求