学员笔记千锋教育论坛_H5之家 - 中国HTML5教程资源分享第一站

订阅千锋最新开发课程视频教程、源码、ppt

第二阶段最开始的难点要数函数了,之后就是ajax,今天我就来分享一下关于ajax的总结. 1.什么是ajax:
     AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

2.ajax有什么用:
   AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
   使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

3.ajax有什么优势:
   AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。

要学习ajax,我们要知道几个最基本的词汇,下面是我自己总结的一些基本词汇:
readyState:
表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；
1：open方法成功调用，但Sendf方法未调用；
2：send方法已经调用，尚未开始接受数据；
3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；
4：完成，即响应数据接受完成。

Onreadystatechange:
请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。

responseText:
服务器响应的文本内容
responseXML:
服务器响应的XML内容对应的DOM对象
Status:
服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText:
服务器返回状态的文本信息。

ajax的执行步骤:
<body><button id="btn">获取数据</button></body>

var btn = document.getElementById("btn"); btn.onclick = function () {//点击事件       var req = new XMLHttpRequest();       alert("我是第一步:" + req.readyState);       req.open("get", "mockData/userinfos.json", true);       alert("我是第二步:" + req.readyState);       req.send();       alert("我是第三步:" + req.readyState);       req.onreadystatechange = function () {          alert("我是监听者:" + req.readyState);       } }
这是ajax的基本执行步骤.
req.readyState == 4 && req.status == 200)
这里专门跳出这句话来解释一下,
req.readyState == 4;为什么后面是4,
ajax检查状态码有5个分别是:
0－未初始化，即尚未调用 open。
1－初始化，即尚未调用 send。
2－发送数据，即已经调用 send。
3－数据传送中。
4－完成。因为当req.readyState == 4的时候才能正确切成功的.req.status == 200这个是请求对象,后面也有很多数值,比如常见的404,就是找不到网址换句话说就是路径错误.在这里200表示响应成功.

C:/Users/Administrator.PC-20170807NQHD/AppData/Local/YNote/data/sjj19941106@163.com/91086fc9a3874bb79eb6b4585065afb2/clipboard.png

C:/Users/Administrator.PC-20170807NQHD/AppData/Local/YNote/data/sjj19941106@163.com/91086fc9a3874bb79eb6b4585065afb2/clipboard.png

C:/Users/Administrator.PC-20170807NQHD/AppData/Local/YNote/data/sjj19941106@163.com/91086fc9a3874bb79eb6b4585065afb2/clipboard.png

本主题由阿龙于 17-8-31 15:21 移动

学员笔记 千锋教育论坛

学员笔记千锋教育论坛