Ajax学习笔记

最新推荐文章于 2022-11-25 21:51:29 发布

麝月儿

最新推荐文章于 2022-11-25 21:51:29 发布

阅读量806

点赞数

分类专栏： AJAX 文章标签： Ajax XMLHttpRequest

本文链接：https://blog.csdn.net/sheyueer/article/details/9413027

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、什么是Ajax？

AJAX （Asynchronous JavaScript And XML）指异步 JavaScript 及 XML。使用Ajax可以解决页面的局部更新。

使用的技术包含：javascript和css

XML不是必选项，还可以使用其他数据格式包括普通文本，JSON等

二、使用步骤：

1.创建Ajax对象

针对不同的浏览器，有3种构造函数：

new XMLHttpRequest ( ); //所有浏览器，除了IE 5和IE 6

new ActiveXObject ("Msxml2.XMLHTTP") // IE

new ActiveXObject("Microsoft.XMLHTTP") // IE老版本

兼容不同浏览器版本的.js文件：

function createXHR(){

var xhr;

if (window.ActiveXObject) {//ie

//由于ie有多个不同版本构造函数

//如果某个构造函数不被该ie支持就抛出异常，我们根据这个特性来实现ie下的对象创建

try{

xhr=new ActiveXObject("Msxml2.XMLHTTP");// IE

}catch(exception){

xhr=new ActiveXObject("Microsoft.XMLHTTP");// IE 老版本

}

} else {//not ie

xhr=new XMLHttpRequest(); //所有浏览器，除了IE 5和IE 6

}

return xhr;

}

2..jsp文件代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajaxUtil.js"></script>
</head>
<body>
<input type="button" οnclick="getInnerText()" value="单击">
<p id="myp"></p>
<script type="text/javascript">
function getInnerText(){
xhr=createXHR();
//1.打开
xhr.open("GET","getInnerText");
//2.注册回调函数

//告诉事情干完了，如何通知当前页面的对象
xhr.onreadystatechange=function(){ //readyState的属性值(0~4)增加时,都会触发该事件句柄,所以该方法调用了4次
console.log(xhr.readyState);
if(xhr.readyState==4){//HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded)
if(xhr.status==200){
//responseText：目前为止从服务器接收到的响应体(不包括头部)
document.getElementById("myp").innerHTML=xhr.responseText;
}else{
document.getElementById("myp").innerHTML="请求错误";
}
}
}
//3.设置头部：如果需要的话，指定额外的请求参数
//xhr.setRequestHeader();
//4.发送请求
xhr.send(null);
}
</script>
</body>
</html>

三、ajax的局限：XMLHttpRequest对象第一个版本

1.不能跨域请求---单源策略/同源策略

一个源不能请求另外一个源

源：协议+主机+端口必须完全相同.

协议不同：

Http://localhost:80/sxndajax/index.jsp

https://localhost:80/sxndajax/index.jsp

端口不同：

Http://localhost:80/sxndajax/index.jsp

http://localhost:8080/sxndajax/index.jsp

2. 不能传递文件—不能通过Ajax上传文件

这些限制都是出于安全考虑.

四、响应内容为XML:responseXML

1.responseXML成功的3个条件：

<1>readyState为4；

<2>Content-Type为“text/ xml”、“application /xml”或任何以“+xml”结尾，表示响应是一个XML文档；

<3>响应体由整齐的、解析没有错误的XML标记组成。

2. 服务器端代码：

//1、写的是xml

response.setContentType("text/xml");

//2、格式良好的xml

PrintWriter out=response.getWriter();

out.write("<date>");

out.write(new Date().toGMTString());

out.write("</date>");

3. 客户端响应处理代码：

if(xhr.readyState==4){

if(xhr.status==200){

//document.getElementById("myp").innerHTML=xhr.responseText;

//xhr.responseXML是一个Document对象

document.getElementById("myp").innerHTML=xhr.responseXML.childNodes[0].textContent;

}else{

document.getElementById("myp").innerHTML="请求错误";

}

五、JSON(JavaScript Object Notation)

1.什么是JSON？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

2。为什么用JSON？

<user>

<age>23</age> {“name”:”z3”,”age”:23}

</user>

3.JSON语法：

<1> 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

<2> 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

<3>值（value ）可以是双引号括起来的字符串（ string ）、数值(number)、 true 、 false 、 null 、对象（object）或者数组（array）。这些结构可以嵌套。

<4> 字符串（ string ）是由双引号包围的任意数量Unicode字符的集合，使用 反斜线 转义。一个字符（character）即一个单独的字符串（character string）。

4.JSON格式客户端解析：

4.1服务器响应格式：

// 告诉是json格式
response.setContentType("application/ json");
PrintWriter out=response.getWriter();
out.write("{\"name\":\"z3\",\"age\":22}");

4.2客户端解析：

4.2.1 借助于浏览器提供的JSON对象: JSON.parse(xhr.responseText).属性名

xhr.onreadystatechange=function(){ //readyState的属性值(0~4)增加时,都会触发该事件句柄,所以该方法调用了4次
console.log(xhr.readyState);
if(xhr.readyState==4){ //HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded)
if(xhr.status==200){
//借助于浏览器提供的JSON对象:SON.parse(xhr.responseText).属性名
resTxt="name="+ JSON.parse(xhr.responseText) .name+",age="+ JSON.parse(xhr.responseText) .age;
document.getElementById("myp").innerHTML=resTxt;
}else{
document.getElementById("myp").innerHTML="请求错误";
}
}
}

4.2.1 借助于浏览器提供的eval对象: eval("("+xhr.responseText+")").属性名，但 存在安全问题，尽量少用.

xhr.onreadystatechange=function(){ //readyState的属性值(0~4)增加时,都会触发该事件句柄,所以该方法调用了4次
console.log(xhr.readyState);
if(xhr.readyState==4){//HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded)
if(xhr.status==200){
//借助于浏览器提供的eval对象:eval("("+xhr.responseText+")").属性名
resTxt="name="+eval("("+xhr.responseText+")").name+",age="+eval("("+xhr.responseText+")").age;
document.getElementById("myp").innerHTML=resTxt;
}else{
document.getElementById("myp").innerHTML="请求错误";
}
}
}