JAVA Web学习(19)___第13章Ajax技术

2019-10-12 本文已影响0人岁月静好浅笑安然

第13章Ajax技术

13.1 当下谁使用Ajax

百度搜索提示、淘宝新会员注册

13.2 Ajax开发模式与传统模式比较

传统的web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用，不需要整个页面刷新，对部分数据进行更新，从而降低网络流量，给用户带来更好的体验。

13.3 Ajax的使用技术

13.4 使用XMLHttpRequest对象

13.4.1 初始化 XMLHttpRequest对象

IE浏览器

    var httpRequest=new ActiveXObject("Msxml2.XMLHTTP");
    或者
    var httpRequest=new ActiveXObject("Microsoft.XMLHTTP");

非IE浏览器

    var httpRequest=new XMLHttpRequest();

为了提高程序兼容性，可以创建一个跨浏览器的 XMLHttpRequest对象

var httpRequest; 
if(window.XMLHttpRequest){
    httpRequest=new XMLHttpRequest(); //非IE浏览器
}else if(window.ActiveXObject){       //IE浏览器           
    try{
    httpRequest=new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    }
    }
}

13.4.2 XMLHttpRequest对象的常用方法

open()方法
用于设置进行异步请求目标的URL、请求方法以及其他参数信息，语法如下

    open("method","URL"[,asyncFlag[,"username"[,"password"]]]])

参数说明

method 用于指定请求的类型，一般为GET或者POST
URL 用于指定请求地址。可以使用绝对地址或者相对地址，并且可以传递查询字符串
asyncFlag 为可选参数，true为异步，false为同步，默认为true
username 为可选参数，指定请求用户名，没有时可省略
password 为可选参数，用于指定请求密码，没有时可省略
示例

    httpRequest.open("GET","reqister.jsp",true);

send()方法
用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止，语法如下

    send(content)

参数说明：
content：用于指定发送的数据，可以是DOM对象的实例、输入流或字符串，如果没有参数需要传递，可以设置为null

setRequestHeader()方法
用于设置HTTP请求头的值。语法如下

 setRequestHeader("header","value")

setRequestHeader()方法必须在调用open()方法之后才能调用
示例代码

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

abort()方法
用于停止或者放弃当前异步请求
getResponseHeader()方法
用于以字符串形式返回指定的HTTP头信息，语法如下

    getResponseHeader("headerLabel")

参数说明：headerLabel用于指定HTTP头，包括Server、Content-Type和Date等
示例代码

    httpRequest.getAllResponseHeaders("Content-Type");

getAllResponseHeaders()方法
用于以字符串形式返回完整的HTTP头信息，语法如下

    httpRequest.getAllResponseHeaders();

13.4.3 XMLHttpRequest对象的常用属性

onreadystatechange属性

用于指定状态发生改变时所触发的事件处理器

readyState属性

用于获取请求的状态

值	意义	值	意义
0	未初始化	3	交互中
1	正在加载	4	完成
2	已加载

responseText 属性
获取服务器的响应，表示为字符串
responseXML属性
获取服务器的响应，表示为XML，这个对象可以解析为一个DOM对象
status 属性
用于返回HTTP状态码，200/202/400/404/500等

13.5 与服务器通信--发送请求和处理响应

13.5.1 示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","./ajax_info.txt",true);
    
    //需要在index.jsp同级目录下，新建ajax_info.txt文件，在ajax_info.txt中写入要更改的内容，点击按钮更改内容
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

13.6 解决中文乱码问题

13.6.1 发送请求时出现中文乱码

    String str=request.getParameter("parPorvince");
    str=new String(str.getBytes("ISO-8859-1"),"UTF-8"):

13.6.2 获取服务器的响应结果时出现中文乱码

保证从服务器端传递的数据采用UTF-8的编码格式。

13.7 Ajax重构

将通用的代码进行封装

1.创建一个单独的JS文件，该文件中编写重构Ajax所需的代码
2.引用刚创建的JS文件
3.在应用Ajax页面中编写错误处理的方法，实例化Ajax对象的方法和回调函数