加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax学习笔记

发布时间:2020-12-15 22:03:07 所属栏目:百科 来源:网络整理
导读:一、什么是Ajax? AJAX ( AsynchronousJavaScriptAndXML ) 指异步 JavaScript 及 XML 。使用Ajax可以解决页面的局部更新。 使用的技术包含: javascript 和 css XML 不是必选项,还可以使用其他数据格式包括普通文本, JSON 等 二、使用步骤: 1.创建Ajax

一、什么是Ajax?

AJAXAsynchronousJavaScriptAndXML指异步JavaScriptXML。使用Ajax可以解决页面的局部更新。

使用的技术包含:javascriptcss

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


二、使用步骤:

1.创建Ajax对象

针对不同的浏览器,有3种构造函数:

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

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

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

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

functioncreateXHR(){

varxhr;

if(window.ActiveXObject){//ie

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

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

try{

xhr=newActiveXObject("Msxml2.XMLHTTP");// IE

}catch(exception){

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

}

}else{//notie

xhr=newXMLHttpRequest(); //所有浏览器,除了IE 5和IE 6

}

returnxhr;

}

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" onclick="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

端口不同:

ttp://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

PrintWriterout=response.getWriter();

out.write("<date>");

out.write(newDate().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>

<name>z3</name>

<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="请求错误";
}
}
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读