JSON数据和AJAX学习

web页面用Ajax的方式和服务端进行json数据交互

Ajax - - (Asynchronous Javascript And XML) 是js的子集(核心对象 XmlHttpRequest)

XMLHttpRequest对象可以在不向服务器提交整个页面的情况下 实现局部更新网页
可以设置请求类型 get请求 post设置head参数请求
XMLHttpRequest 可以同步或异步返回服务器的响应 能以任何形式的文本文档返回
名为XMLHttpRequest 但并不限于和XML文档使用 可接收任何形式的文本文档

Ajax即局部刷新技术两种访问方式都属于局部刷新不会整个页面刷新

同步请求 发送请求后 服务器未执行完毕 页面会假死 无法进行其他操作
异步请求 发送请求后 无需等到服务器执行完毕 可继续其他操作

<script type="text/javascript">
	function test(){
		//创建Ajax引擎对象 操作都通过此对象
		var xhr= new XMLHttpRequest();
		//绑定提交地址 参数为 请求类型 URL地址 是否异步(默认为true 异步)
		xhr.open("GET","www.baidu.com",true);
		//发送请求
		xhr.send();
		//绑定监听 监听服务器是否数据响应给Ajax引擎 readyState改变后触发
		xhr.onreadystatechange = function(){
			//接收响应数据
			//var test = xhr.responseText;获得XML形式的响应数据 已废弃(数据冗余)
			var test = xhr.responseText;
			alert(test);
		}
	}
</script>
<body>
	<input type="button" value="Test" onclick="test()">
</body>

readyStatus	描述
0	(请求未初始化)未调用open()
1	(服务器已建立连接)正在调用send() 已发送请求
2	(请求已接收)send()完成已收到全部响应内容
3	(请求已处理)正在解析响应内容
4	(请求已完成响应就绪)响应内容解析完成客户端可调用

status - - 200	OK(正常响应)
status - - 404	未找到页面(失败响应)

//完整实例
function test(){
	//用XMLHttpRequest做形参 IE6会报错 把XMLHttpRequest作为形参 IE报undefined
	if (window.XMLHttpRequest) {
		//除了IE5 & IE6 其他浏览器使用的对象[Chrome,Firefox,Opera,Safari,IE7+]
		var xhr = new XMLHttpRequest();
	} else {
		//IE5 & IE6 浏览器专属对象
		var xhr = new ActivexObject("Microsoft.XMLHTTP");
	}
	
	xhr.open("GET", "baidu.com", true);
	xhr.send();
	xhr.onreadystatechange = function() {
		//readyState = 4 读取请求完成响应就绪
		if (xhr.readyState == 4) {
			alert("读取请求完成响应就绪");
			//status = 200 正常响应 页面可获得数据
			if (xhr.status == 200) {
				alert("响应成功");
				var test = xhr.responseText;
				alert(test);
			} else {
				//打印状态码
				alert(xhr.status);
			}
		}
	}
}

//GET请求方式 两种参数设置方式相同
//第一中参数设置方式
xhr.open("GET", "baidu.com?name=test", true);
xhr.send();
//第二种请求设置方式
xhr.open("GET", "baidu.com", true);
xhr.send("name=test");

//POST请求方式 必须设置请求头 设置参数必须使用send函数设置
xhr.open("POST", "baidu.com", true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=test");

JSON 对象表示法(JavaScript Object Notation) 编码为UTF-8

json的字符串用双引号 " - - " json的键用双引号 " - - "

json两种表示格式对象

对象格式 : {“key1”:obj1,“key2”:obj2,“key3”:obj3}
数组格式 : [obj1,obj2,obj3]

JSON是js的一个子集数据类型有六中

number = js的number
boolean = js的boolean(true&false)
string = js的string
null = js的null
array = js的Array - - []
object = js的 - - {}

var test = JSON.stringify(str);

//取出对象中的数据
var user = {"name":"test","age":18,"address":"北京"};
var name = user.name;
alert(name);--test
//取出数组中的数据
var user = [{"name":"xxxx"},{"age":25},{"address":"上海"},
			{"name":"test"},{"age":18},{"address":"广州"}];
var name = user[0].name;
alert(name);--xxxx

jQuery使用Ajax 交互json数据

function test(){
	alert("test1");
	$.get(
		"baidu.com",//url地址
		//"name=user&age=18",--普通请求参数
		{"name":"user","age":"18"},//json请求参数
		function(){alert("请求成功");},//该test()函数执行成功 回调该函数
	);
	alert("test2");
	alert("test3");
}
//页面弹出框弹出顺序 test1->test2->test3->请求成功

//java接收参数 json格式和普通传入字符串无差别
String name = request.getParameter("name");
String age = request.getParameter("age");

//java传给页面Ajax一个json格式的字符串 Ajax自动解析
response.getWriter().write("{\"name\":\"leige\",\"age\":23\"}");
//js Ajax引擎接收服务端返回的数据
$.get(
	"/Test/test",
	{"name":"lilei","age":18},
	function(data){alert(data);},
	"json"//设为text 则上面data为文本类型(string)
);
//页面弹出[object,object]

//post请求方式与get一致
$.get(
	"/Test/test",
	//"name=user&age=18",--普通请求参数 传统post不可使用 Ajax的post可使用该方式
	{"name":"lilei","age":18},
	function(data){alert(data);},
	"json"//设为text 则上面data为文本类型(string)
);

Ajax的post请求已经把编码设为UTF-8 java的servlet无需重编码再次编码数据会乱码
Ajax的get请求默认编码为ISO-8859 需要程序 java的servlet重编码
name = new String(name.getBytes(“ISO8859-1”),“UTF-8”);

function ajaxTest(){
	$.ajax({
		url:"/Test/test",//访问地址
		async:false,//是否同步 默认为true 同步
		type:"POST",//请求方式
		data:{"name":"Ajaxtest","age":28},//请求内容
		success:function(data){alert(data);},//成功后回调
		error:function(){alert("访问失败");},//失败后回调
		dataType:"json"//响应内容格式
	});
}

JSON数据和AJAX学习

猜你喜欢