ajax基础

ajax定义

1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。

2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

4、AJAX 可以使网页实现异步更新

5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

ajax原理

1、XHR创建对象

var xmlhttp;
　　if(window.XMLHttpRequest){

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp = new XMLHttpRequest();
　　}else{

// IE6, IE5 浏览器执行代码
　　　　xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

2、请求地址和请求方式

xmlhttp.open('get','http://yapi.shangyuninfo.com/mock/156/bookType');

3、发送请求给后台
xmlhttp.send();

4、后台验证信息并返回信息给前台
xmlhttp.onreadystatechange = function (res) {
if(xmlhttp.readyState == 4 && xmlhttp.status ==200){
　　console.log(res.currentTarget.response)
var result = JSON.parse(res.currentTarget.response);
　　console.log(result.book[0].typeList)
　　}
}

补充：

什么是onreadystatechange事件
1、当请求被发送到服务器时，我们需要执行一些基于响应的任务。
2、每当 readyState 改变时，就会触发 onreadystatechange 事件。
3、readyState 属性存有 XMLHttpRequest 的状态信息。

json对象

var json = {'name':'zs','age':18};
console.log(json.name)
// // json对象转换为json字符串 JSON.stringify()
 console.log(JSON.stringify(json))
// // json字符串转为json对象 JSON.parse()
var json1 = '{"name":"李四","sex":"男"}';
console.log(JSON.parse(json1))