AJAX and Javaweb
AJAX and Javaweb
https协议
—— 保证数据安全
概念
http协议（超文本传输协议）：是客户端浏览器或其他程序与web服务器之间的应用层通信协议。
https协议：可以理解为HTTP+SSL/TLS，即HTTP下加入SSL层，hppts的安全基础是SSL，因此加密的详细内容就需要SSL，用于安全的HTTP数据传输。
扩展：SSL/TLS
SSL——安全套接层，主要任务就是提供私密性，信息完整性和身份认证
不依赖于平台和运用程序的协议，位于TCP/IP协议与各种应用层协议之间，为数据通信提高安全支持
TLS——安全传输层协议，用于在两个通信应用程序之间提供保密性和数据完整性。
AJAX
属性介绍
1、创建异步对象，使用js语法
var xhr = new XMLHttpRequest();
2、XMLHttpRequest方法
① open（请求方法，服务器的访问地址，异步还是同步）
例如：
xhr.open("get","loginServlet",true);
② send()：使用异步对象发送请求
3 、XMLHttpRequest属性
onreadystatechange
属性：存储函数，每当readyState属性改变时，就会调用该函数
在onreadystatechange中，我们规定当服务器响应已做好被处理的准备时所执行的任务
XMLHttpRequest.onreadystatechange = callback; //当 readyState的值变化时，callback函数就会被调用
readyState
属性：请求状态，
-
0：表示创建异步对象时，new XMLHttpRequest();
-
1：表示初始异步对象的请求参数。执行open（）方法
-
2：使用send（）方法发送请求
-
3：使用异步对象从服务器接收了数据
-
4：异步对象接收了数据，并在异步对象内处理完成后
status
属性：网络的状态，和http的状态码对应
- 200：请求成功
- 404：服务器资源没有找到
- 500：服务器内部代码有错误
responseText
属性：表示服务器端返回的数据
var data = xhr.responseText;
创建步骤
1）使用js创建异步对象
var xhr = new XMLRequest();
2）给异步对象绑定事件，事件名称onreadystatechange
例如button增加单击事件 onclick
xhr绑定事件
xhr.onreadystatechange = function(){}
<input type="button" onclick="btnClick()"/>
<script type="text/javascript">
function btnClick(){
}
script>
在绑定事件中做什么，根据readyState值做请求的处理
xhr.readystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
var data = xhr.responseText;
更新dom对象
document.getElementById("#mydiv").innertHTML = data;
}
}
- 初始请求的参数，执行open()函数
xhr.open("get","loginServlet",true)
open()方法中的url参数可以是一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是，请求处理页可以是一个JSP页面，也可以是一个Servlet。
- 发送请求，执行send()
请求是get()时，参数可以设置为null
xhr.send()
请求是post()时，可以提过该参数指定要发送的请求参数
var param = "user=" + forml.user.value + "&pwd="+forml.question.value + "&email=" + formal.email.value;
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(param);
处理服务器响应
向服务器发送请求时，已经通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。
在回调函数中：
{
if(readState)//判断服务器的请求状态，保证请求已经完成
{
if(Status)//根据服务器的HTTP状态码，判断服务器请求的响应是否成功
{
alert("winning!");
//成功，获取服务器的响应反馈给客户
responseText/*返回字符串响应*/
responseXML/*返回XML响应*/
}
}
}
-
处理字符串响应
//1，字符串响应结构显示在提示对话框中 function getResult(){ if(http_request.readyState == 4){ if(http_request.status == 200){ alert(http_request.responseText); }else{ alert("请求页面有错误！"); } } } //2,显示到页面上指定的地方，先在页面上合适位置添加一个或标记，设置该标记的ID <div id="div_result"> </div> function getResult(){ if(http_request.readyState == 4){ if(http_request.status == 200){ document.getElementById("div_result").innerHTML = http_request.responseText; }else{ alert("请求页面有错误！"); } } }处理XML响应
处理需要生成比较复杂的响应，生成XML文档，在回调函数中遍历保存留言信息的XML文档，并显示在页面上。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Ajax获取XML信息title> <link href="t1.xml" /> <script> // C:\Users\vincn\AppData\Local\Google\Chrome\Application>chrome.exe --disable-web-security --user-data-dir=C:\MyChromeUserFata function f1() { // 创建Ajax对象 var obj = new XMLHttpRequest(); // 感知Ajax状态 obj.onreadystatechange = function() { if (obj.readyState == 4 && obj.status == 200) { // 获取XMLDocument对象 var xmlobj = obj.responseXML; // 获取xml对象的第一个元素结点students var students = xmlobj.childNodes[0]; // 获取元素结点students下所有的student的结点 var student = students.getElementsByTagName('student'); // 遍历student结点,并获得具体信息 var info = ""; for (var i = 0; i < student.length; i++) { var name = student[i].getElementsByTagName('name')[0].firstChild.nodeValue; var addr = student[i].getElementsByTagName('addr')[0].firstChild.nodeValue; var age = student[i].getElementsByTagName('age')[0].firstChild.nodeValue; // 拼接输出信息字符串 info += "姓名：" + name + "，地址：" + addr + "，年龄：" + age + "
"; } // 将字符串写入到id名称为result的div字符串中 document.getElementById('result').innerHTML = info; } } // 创建一个http请求，并设置“请求地址” obj.open("get", "t1.xml"); //发送请求 obj.send(); } script> head> <body> <h2>Ajax获取XML信息h2> <div id="result">div> <input type="button" onclick="f1();" value="触发" /> body> html>XML文档如下：
<students> <student> <name>wendyname> <age>35age> <addr>Santa Feaddr> student> <student> <name>Yaphetname> <age>32age> <addr>Balchikaddr> student> <student> <name>Isaiahname> <age>35age> <addr>Calderaaddr> student> students>结果：
