Ajax全接触

Ajax——原理、实践、扩展

（本篇博客是我首次使用Markdown编辑器来写博客：）

---

一、Ajax介绍

Asynchronous JavaScript and XML（异步的JavaScript和XML）是一种在无需加载整个网页的情况之下能够更新部分网页的技术。

读音：A zhai ke si 不是 阿贾克斯

Ajax带来了网页的异步。

二、介绍http

http：计算机通过网路进行通信的协议

1. http请求

1)、建立TCP连接
2)、Web浏览器向Web服务器发送请求命令
3)、Web浏览器发送请求头信息
4)、Web服务器应答
5)、Web服务器发送应答头信息
6)、Web服务器向浏览器发送数据
7)、Web浏览器关闭TCP连接

2.http请求一般包括四部分
1)、方法：
GET一般用于查询，使用URl传递参数；
POST一般用于修改，内容嵌入到请求体中。
2)、URL（地址）
3)、请求头
4)、请求体

3.http相应一般包含四部分
1)、状态码：用来显示请求成功还是失败
2)、响应头：包含例如服务器类型、日期时间、内容类型和长度啥的
3)、响应体：响应的正文

注：http状态码又3位数字构成，其中首位数字定义了状态码的类型：
1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中
2XX：成功，表示用户请求被正确接收，理解和处理例如：200
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误，例如经常遇到的404
5XX：服务器错误，表示服务器不能完成对请求的处理

三、运用XMLHttpRequest

1.创建 new XMLHttpRequest();
2.发送方法：
open(method,url,async)
send(string) :GET可以不填写string，但POST一般要写些东西
3.取得响应
responseText : 取得字符串形式的响应数据
responseXML : 取得ＸＭＬ形式的响应数据
status和statusText ：以数字和文本形式返回HTTP状态码
getAllResponseHeader() : 获取所有的响应报头
getResponseHeader() ：查询响应中的某个字段的值

注：readyState属性
0：请求未初始化，open还没有调用
1：服务器已经建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且相应已就绪，也就是响应完成了

XMLHttpRequest使用：

var request = new XMLHttpRequest();request.open("GET","get.php",true);request.send();request.onreadystatechange = function(){    if (request.readyState === 4 && request.status === 200){//做一些事情 request.responseText }}

四、Ajax的简单例子

1、PHP端服务器：监听GET和POST，返回信息或更改信息。
PS：用fiddler这个软件在前台没有建立起来的情况下通过http（GET和POST）检测后台的程序。
2、前台程序的建立：
a、html代码布局出来。包含input、button、label等
b、script部分代码进行http的GET网络请求与刷新。
c、F12进行观察发送与接收http的信息。

五、json

• JSON基本概念：
  JSON：javaScript对象表示法（javaScript Object Notation）
  JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
  JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就可以了

• 语法规则：
  名称/值对  例： “name”:”KevinQi”

• json解析
  eval和JSON.parse

  var json obj = eval( ‘(’ + jsondata + ‘)’ );
  var json obj = JSON.parse( ‘(’ + jsondata + ‘)’ );

六、ajax第三方的封装：

jQuery中的ajax使用