AJAX

AJAX指异步JavaScript和XML。是一种用于创建更好更快以及互动性更强的web应用程序的技术，是基于JavaScript、XML、HTML、CSS的用法。

ajax：只刷新局部页面的技术

JavaScript：更新局部的页面。
XML：一般用于请求数据和响应数据的封装。
XMLHttpRequest对象：发送请求到服务器并获得返回结果。
CSS：美化页面样式。
异步：发送请求后不等返回结果，由回调函数处理结果。

XMLHttpRequest对象

构造方法：不同浏览器获取该对象的方法不同。具体可查看W3CSchool提供的函数。

AJAX步骤：

1.获取XMLHttpRequest对象

2.建立一个连接（调用open()方法）

3.发送请求（调用send(param)方法，get方法的话param为null）

4.处理响应结果，使用指定回调函数的属性：onreadystatechange

测试代码：

//w3cshool中查询到的获取XMLHttpRequest对象的方法
function getXMLHttpRequest() {
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

<%@ 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="${pageContext.request.contextPath }/js/myJS.js"></script>
</head>
<script type="text/javascript">
	window.onload= function(){
		/* 获取XMLHttpRequest对象
		var request = XMLHttpRequest();
		
		alert(request); */
		
		//1.获取XMLHttpRequest对象
		var req =XMLHttpRequest();
		
		//4.处理响应结果
		req.onreadystatechange = function(){//指定回调函数
			
			//alert(req.readyState);//查看服务器端响应状态：1，1，2，3，4
			if(req.readyState==4){
				//alert(req.status);//查看服务器响应状态：200
				if(req.status==200){
					alert(req.responseText);//如果响应状态为200，查看响应内容：hello servelt!
				}
				
			}
			
		}
		
		//2.建立一个请求
		req.open("get","${pageContext.request.contextPath }/servlet/servletDemo1");
		//3.发送请求
		req.send(null);
	}
</script>
<body>
</body>
</html>

方法：

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址，可以问号传值 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

属性

onreadystatechange：指定回调函数,用来进行事件处理
readyState: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象 documednt（不常用）

readyState：类型short；只读

responseText：类型String；只读

responseXML：类型Document；只读

status：类型short；只读

JSON

JSON(Javascript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

这种语言是基于对象的。基本格式是：var jo ={键名：值名，键名：值名，...} 可以用来存储变量和函数。

var pp = {name:"tom",age:"18",show:function(){alert("hello");}};

//调用如下：
pp.age  : document.write(pp.age);
pp.show : pp.show();

var ppp = [{name:"tom",age:18},{name:"jerry",age:19}];
//访问jerry：
document.write(ppp[1].name);

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

需要将普通字符串转换位JSON对象需要用到JSON的包：

这些是我们需要导入的包，导入包后就存在了，将数据封装成json对象：

那么，json对象可以封装那些类型的数据呢？？？

json可以封装任意类型的数据（Object）。

比如我们创建一个自定义对象b，那么使用json封装b对象为json对象的语法如下：

String s = JSONObject.fromObejct(b).toString();

s就是我们封装后的json对象，可以在控制台打印看一下。

再比如我们需要封装一个集合对象List，那么就使用JSONArray对象：

String s = JSONArray.fromObject(list).toString();

在将其他对象转换为json对象的时候，有时候我们并不想把所有的参数都转换，只需要转换一部分，那么我们可以使用JsonConfig对象来完成过滤功能：

JsonConfig jc = new JsonConfig();
jc.setExcludes(new String[]{"name","gender","birthday"});

就可以把我们希望的值写入json对象中了。

AJAX&JSON学习笔记

AJAX

XMLHttpRequest对象

JSON

猜你喜欢