AJAX和JSON

第一个课程：ajax:

1.全局刷新和局部刷新

        全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面
        局部刷新：在浏览器的内部，发起请求，获取数据，改变页面的部分内容
        其余的页面无需加载和渲染，网络中数据传输量少，给用户的感受好

 

       ajax是用来做局部刷新的，局部刷新使用的核心对象是异步对象（XMLHttpServlet）
       这个异步对象是存放在浏览器内存中的，使用javaScript语法创建和使用XMLHttpRequest对象

2.ajax：Asynchronous JavaScript and XML （异步的JavaScript 和 XML）

 Asynchronous:异步的意思
           JavaScript ：javaScript脚本，在浏览器中执行
           and:和
           xml:是一种数据格式

ajax是一种做局部刷新的新方法（2003左右）,不是一种语言。ajax包含的技术主要有javaScript
dom,css,xml等，核心是javaScript和xml
javaScript：负责创建异步对象，发送请求，更新页面中的dom对象，ajax请求需要服务器端的数据
xml：网络中传输的数据格式,使用json替换了xml
<数据>
<数据1>宝马1</数据1>
<数据2>宝马2</数据2>
<数据3>宝马3</数据3>
<数据4>宝马4</数据4>
</数据>

3.ajax中创建XMLHttpRequest对象

1)创建异步对象 var xmlHttp=new XMLHttpRequest();

2)给异步对象绑定事件，onreadystatechange:当异步对象发起请求，获取数据都会触发这个事件 这个事件需要指定一个函数，在函数中处理状态的变化。

btn.onclick=fun1();
function fun1(){
alert("按钮单击");
}

例如：

xmlHttp.onreadystatechange=function(){
处理请求的状态变化。
if(xmlHttp.readState==4&&xmlHttp.status==200){
//可以处理服务器端的数据，更新当前页面
var data=xmlHttp.responseText;
document.getElementById("name").value=data;
}
}

异步对象的属性：readyState表示异步对象请求的状态变化
0：创建异步对象时，new XMLHttpRequest();
1:初始化异步请求对象，xmlHttp.open();
2:发送请求，xmlHttp.send();
3:从服务器端获取了数据，此时为3，注意3是异步对象内部使用，获取了原始的数据
4:异步对象把接收的数据处理完成之后，此时开发人员在4的时候处理数据
在4的时候，开发人员做了什么？更新当前页面

异步对象的status属性，表示网路请求的状况的 200,404,500,需要当status==200
时，表示网络请求是成功的

3)初始异步请求对象

异步的方式open()
xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求(默认是true))
例如：
xmlHttp.open("get","loginServlet?name=zs&pwd=123",true);

4)使用异步对象发送请求

xmlHttp.send();

获取服务端返回的数据，使用异步对象的属性 responseText
使用例子：xmlHttp.responseText

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange对应的函数

4.ajax发起请求=======servlet（返回一个JSON格式的字符串{name:"河北",jiancheng:"冀",shenghui:"石家庄"}）

json分类：

1.JSON对象，jsonobject，这种对象的格式 名称：值，也可以看做是key:value格式

2.JSON数组，JSONArray,基本格式[{name:"河北" ,jiancheng:"冀"，"shenghui":"石家庄"},
{name:"山西" ,jiancheng:"晋"，"shenghui":"太原市"}
]

为什么要使用JSON：
1.JSON格式好理解
2.json格式数据在多种语言中，比较容易处理，使用java，javascript读写JSON格式的数据比较容易
3.json格式数据占用的空间少，在网络中传输快

处理json的工具库：gson(goole),fastjson(阿里)，jackson,json-lib

在JS中，可以把json格式的字符串，转换成JSON对象，json中的key，就是JSON对象的属性名