准备工作
配置本地服务器环境,这里推荐安装:phpstudy,优点:一次性安装,无须配置即可使用,非常方便
Ajax 简介
什么是 Ajax ?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX 可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
Ajax 的基本用法
-
创建 XMLHttpRequest 对象
语法:var myAjax=new XMLHttpRequest();
老版本的 IE(IE5 和 IE6)使用 ActiveX 对象:
var myAjax=new ActiveXObject("Microsoft.XMLHTTP"); -
向服务器发送请求:使用open() 和 send() 方法:
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- sync:true(异步)或 false(同步)
- send(string):string:仅用于 POST 请求
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
-
服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:responseText 属性返回字符串形式的响应
- responseXML 属性:如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性
-
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。- XMLHttpRequest 对象的三个重要的属性:
- onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
- status:200: "OK"/404: 未找到页面
- XMLHttpRequest 对象的三个重要的属性:
status 和statusText(了解内容)
XMLHttpRequest 对象 status 和statusText 属性对照表
status | statusText | 说明 |
---|---|---|
0** | - | 未被始化 |
1** | - | 请求收到,继续处理 |
100 | Continue | 客户必须继续发出请求 |
101 | Switching protocols | 客户要求服务器根据请求转换HTTP协议版本 |
2** | - | 操作成功收到,分析、接受 |
200 | OK | 交易成功 |
201 | Created | 提示知道新文件的URL |
202 | Accepted | 接受和处理、但处理未完成 |
203 | Non-Authoritative Information | 返回信息不确定或不完整 |
204 | No Content | 请求收到,但返回信息为空 |
205 | Reset Content | 服务器完成了请求,用户代理必须复位当前已经浏览过的文件 |
206 | Partial Content | 服务器已经完成了部分用户的GET请求 |
3** | - | 完成此请求必须进一步处理 |
300 | Multiple Choices | 请求的资源可在多处得到 |
301 | Moved Permanently | 删除请求数据 |
302 | Found | 在其他地址发现了请求数据 |
303 | See Other | 建议客户访问其他URL或访问方式 |
304 | Not Modified | 客户端已经执行了GET,但文件未变化 |
305 | Use Proxy | 请求的资源必须从服务器指定的地址得到 |
306 | 前一版本HTTP中使用的代码,现行版本中不再使用 | |
307 | Temporary Redirect | 申明请求的资源临时性删除 |
4** | - | 请求包含一个错误语法或不能完成 |
400 | Bad Request | 错误请求,如语法错误 |
401 | Unauthorized | 请求授权失败 |
402 | Payment Required | 保留有效ChargeTo头响应 |
403 | Forbidden | 请求不允许(由于服务器上文件或目录的权限设置导致资源不可用) |
404 | Not Found | 没有发现文件、查询或URl(没有找到指定的资源) |
405 | Method Not Allowed | 用户在Request-Line字段定义的方法不允许 |
406 | Not Acceptable | 根据用户发送的Accept拖,请求资源不可访问 |
407 | Proxy Authentication Required | 类似401,用户必须首先在代理服务器上得到授权 |
408 | Request Timeout | 客户端没有在用户指定的饿时间内完成请求 |
409 | Conflict | 对当前资源状态,请求不能完成 |
410 | Gone | 服务器上不再有此资源且无进一步的参考地址 |
411 | Length Required | 服务器拒绝用户定义的Content-Length属性请求 |
412 | Precondition Failed | 一个或多个请求头字段在当前请求中错误 |
413 | Request Entity Too Large | 请求的资源大于服务器允许的大小 |
414 | Request-URI Too Long | 请求的资源URL长于服务器允许的长度 |
415 | Unsupported Media Type | 请求资源不支持请求项目格式 |
416 | Requested Range Not Suitable | 请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段 |
417 | Expectation Failed | 服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 |
5** | - | 服务器执行一个完全有效请求失败 |
500 | Internal Server Error | 服务器产生内部错误 |
501 | Not Implemented | 服务器不支持请求的函数 |
502 | Bad Gateway | 服务器暂时不可用,有时是为了防止发生系统过载 |
503 | Service Unavailable | 服务器过载或暂停维修 |
504 | Gateway Timeout | 关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 |
505 | HTTP Version Not Supported | 服务器不支持或拒绝支请求头中指定的HTTP版本 |
12029 | an unknown error occurred while processing the request on the server. the status code returned from the server was : 12029 | 原因:网络不通. 刷新一下就知道了 |
了解GET和POST请求的区别
- GET方法:通常用来从指定的资源请求数据。
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求不应在处理敏感数据时使用
- GET 请求有长度限制
由于GET方法提交的数据是作为URL请求的一部分所以提交的数据量不能太大
- GET 请求只应当用于取回数据
- POST方法: 通常用来向指定的资源提交要被处理的数据
- POST 请求不会被缓存
- POST 请求不会保留在浏览器历史记录中
- POST 请求对数据长度没有要求
- POST方法主要是向服务器提交数据,尤其是大批量的数据
- 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。本章中不对POST做展开讲解
在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。
了解同步和异步的区别
- 同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
当前只能做一件事,其他事情必须等当前的事情完成,才能继续后面的事情。
不推荐使用,但某些情况下需要:比如当前请求的结果是下一步请求的前提,知道当前请求的结果才可以处理后续请求
- 异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
同时可以做多件事情
温馨提示
- 本章忽略简化的内容如下
- 向服务器请求数据时传递参数的情况
- POST提交的情况
- 涉及到服务器端处理的一些内容
- ......
本章介绍了Ajax的工作原理和基本用法,但对一些问题进行了一定程度的简化,如果想要真正用户Ajax还需要多少懂一点服务器端的语言
本章封装的函数还有进一步需要改善的地方,在一些JS框架中都有封装好的Ajax方法,后续课程中还会进一步介绍