html js调用ajax请求,原生的js写Ajax请求

1：界面

界面就一个按钮 和一个用来显示服务器返回来的数据的div

2:js实现Ajax

注意：我这里在创建XMLHttpRequest对象，没有用兼容性写法。实际中，需要用兼容性写法。

7步完成  第8步，如果需要处理数据，就处理数据。

3：后台的数据是   json格式的数据 ，是一个数组。

4：效果

点击按钮出现如下效果，并且页面不会刷新。

总结:

Ajax：允许浏览器与服务器通信不用刷新整个页面的一种技术，它不是一门新的技术，而是几种技术的整合。

传统的web模型：客户端向服务器发送一个请求，服务器返回整个页面给客户端，如此反复。

在Ajax模型中：数据在客户端与服务器之间独立传输，服务器不再返回整个页面给客户端。

readyState属性表示Ajax请求的当前状态。它的值用数字代表。

0:还没开始调用open方法.

1:正在加载。open方法已经被调用，但send方法还没有被调用

2:已经加载完毕了。send方法以被调用，请求已经开始了

3:交互中。服务器正在发送响应。

4:完成。响应发送完毕。

每次readyState属性值的改变都会触发readystatechange事件

在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性中。

通过把这个值和200或304比较，可以确保服务器是否发送了一个成功的响应。

404:没有找到页面(not found)

403:禁止访问(forbidden)

500:内部服务器出错(internal service error)

200:一切正常(ok)

304:没有被修改(not modified)

交互数据的格式可以是：html  普通的文本 json  xml

html 、json、  普通的文本 ：都是以文本类型进行传输

html 、json、  普通的文本类型的数据： 通过responseText属性来获取

xml类型的数据：                                    通过responseXML属性来获取