Ajax和JSON

AJAX  特点,局部刷新异步提交

需要在 javascript中创建 AJAX 对象

1.创建AJAX对象 

var  xhr = new XMLHttpRequest();

2.和服务器建立连接,

xhr.opn({get/post},"url地址",是否异步,服务器的用户名,服务器的密码);

Ajax和JSON

3.执行回调函数

AJAX响应回来后自动调用 函数,

ajax.onreadystatechange =  函数名称,不能有括号

Ajax和JSON

AJAX的执行过程

1.0 状态,就是创建AJAX的对象

2.1 状态,当执行了open 连接,建立了连接,但是还没有发出请求

3. 2 状态,请求已经发出,正在进行处理中,

4. 3状态, 请求已经处理,响应中有部分数据可用,但是服务器还没有完成响应

5. 4状态, 响应完成,可以访问服务器响应并使用它

4.发送数据请求

如果是 get请求,直接发送

ajax. send(null) 就可以

如果是post请求,需要设置请求头信息

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Ajax和JSON

注意,使用AJAX访问,就不需要转发和重定项

Ajax和JSON

Ajax和JSON

AJAX的  二级联动

Ajax和JSON

Ajax和JSON

响应的数据格式   3种格式

1.普通响应式,

 前台的jsp/html如何接收:

       xhr.responseText

2.json数据格式

JSON KEY一定是字符串,VALUE就不一定了

JSON 要么是对象,要不是一个数组,也只能是二者之一

实现json的3中方式

1.通过拼接 json的格式

Ajax和JSON

2.修改toString,方法

Ajax和JSON

3.利用Gsonjar包,获得的

Ajax和JSON

  前台的jsp/html如何接收:

    var text= xhr.responseText :注意接收的是String类型的数据

   如何转化成可以执行的json的数据格式

  【A】 eval("var  json="+text);

  【B】var  json =JSON.parse(text);

3.XML 格式

Ajax和JSON

    前台的jsp/html如何接收:

    var  xml= xhr.responseXML

    var  val=  xml.getElementsByTagName("name")[0].innerHTML;

2.JSON格式

Ajax和JSON

Ajax和JSON

AJAX+JQuery(一种只有三种3方式,实际就只调用$.ajax, Post和get底层都是调用$.ajax)

Ajax和JSON

实现三级联动

Ajax和JSON