Ajax和JSON基础学习

Ajax

点击按钮获取同级目录的txt文件内容

oBtn.onclick = function() {//5步走
	
	//打开浏览器
	//方法一
	var xhr = null;
	if(window.XMLHttpRequest) {
	//如果是IE7以上用这个
		xhr = new XMLHttpRequest();
	} else {
	//IE6以下用这个
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	/* //方法二
	var xhr = null;
	try {	
	//如果是IE7以上用这个
		xhr = new XMLHttpRequest();
	} catch (e) {
	//IE6以下用这个
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	*/

	//在地址栏输入地址
	xhr.open(‘get’,’1.txt’,true);

	//回车提交
	xhr.send();

	//等待服务器返回页面
	xhr.onreadystatechange = function() {
		//返回成功
		if(xhr.readyState == 4) {
			alert(xhr.responseText);
		}
	}

}

• 做传递时前后端的传递方式、传递名要对应，这和收快递的道理是一样的；

异步与同步

• 异步：非阻塞，前面代码不会影响后面代码的执行；
• 同步：阻塞，前面代码会影响后面代码的执行。

产生的问题

Ajax get请求产生缓存怎么办？

在open（）函数里面的第二个参数，即地址。后面加上一个随机数，例如时间戳：+new Data().getTime()。就可以在每次发送请求时产生不同的地址，这样缓存就没用了；

注意！一定要在原字符串里面最后面加一个‘&’。

post方式没有缓存问题！

使用get向后端发送中文字符串会乱码，怎么办？

比如向后端发送username = 刘伟&age = 30&。

可以酱紫：username = ‘+encodeURI(‘刘伟’)+’&age = 30&

post方式没有中文乱码问题！

当使用post方式时，直接使用xhr.send(‘username = leo&age = 30’);会发生错误。

这个时候，我们要在send()之前先定义请求头。like this：

xhr.open(“POST”,”ajax_test.asp”,true); 
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); 
xhr.send(“username = leo&age = 30”);

JSON

• IE7以下就不支持了，需要去json.org下载对应语言的js文件导入到你的html文件中。
• json中的key必须用双引号，单引号都不行。

front end#