AJAX请求

Ajax全名 Asynchronous JavaScript and XML，异步的JS和XML，是一种新技术，但是它并不是一种编程语言，而是一种新方法。

Ajax有什么用呢？

在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

也就是说，我们可以不用重新加载页面，得到额外的数据。

没有Ajax的世界：

传统的没有用Ajax的网页中，想要更新内容或者提交一个表单，就要重新加载页面。

有Ajax的世界
使用了Ajax的网页，通过跟后台服务器进行少量数据交互，网页可以实现异步局部更新。

Ajax的工作原理

Ajax的工作原理如下：

HTTP请求

在写一个Ajax之前，我们先了解一下什么是HTTP请求：

http:是一套计算机通过网络进行通信的规则，http主要用于客服端（浏览器）向服务器请求信息和服务。
http是一种无状态协议：不建立持久的连接，即服务端不保留连接的相关信息；

无记忆，即每次请求都会打开一个tcp连接，当请求完毕就关闭tcp连接。第二次又重新建立tcp连接。

一个http请求一般包含四个部分：


一个http响应一般由四部分组成：

关于HTTP状态码，以前有一个博客已经写了，这里就不加重复。

XHR对象

什么是XHR对象？
XMLHttpRequest对象用于在后台与服务器交换数据。

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

如何用XHR对象发送一个请求？

1、创建一个XHR对象

2、向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务器

e.g. xmlhttp.open(“GET”,“ajax_info.txt”,true);
xmlhttp.send();

3、服务器响应

在请求发送后，javascript代码会等到服务器响应后再继续执行。

收到响应后，响应的数据会自动填充XHR对象的属性，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获取来自服务器的响应

4、监听响应状态
要想获得响应过程的当前活动阶段或监听响应状态，就可以通过readyState属性的变化来检查，

当readyState发生变化时，就会触发onreadystatechange事件

当readyState==4 , status == 200时，表明响应就绪了，这时候我们就可以获取我们想要的内容了

同步和异步

在Ajax技术之前，网络世界是同步进行的，造成了很多不方便，有了Ajax技术后，网络变成了异步的世界。Ajax通过XMLHttpRequest对象完成异步。

同步：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

e.g. 你叫你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，
直到我告诉你听到了，才一起去吃饭。

e.g. 你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班
才去吃饭。

   var xhr = createXHR();
   xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
         if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
            console.log(xhr.responseText);
         } else {
            console.log('Request was unsuccesful' + xhr.status);
         }
      }
   };
   xhr.open('get','example.txt',true);
   xhr.send();

JSON对象

• JSON：JavaScript 对象表示法（JavaScript Object Notation）。
• JSON是存储和交换文本信息的语法。类似 XML。
• JSON是一种数据格式，不是一种编程语言。在json中没有注释。
• JSON代表了一个数据传输格式。

JSON 值可以是：

数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null

一个对象中可以有多个值对，一个数组可以有多个对象

json对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别把javascript对象序列化为json字符串，把json字符串解析为原生javascript值。

跨域问题

什么是跨域？

先来看看一个域名地址的组成

当协议、子域名、主域名、端口号中的任意一项不同时，都算作不同域，

不同域之间相互请求资源据算作“跨域”。

e.g. http://www.baidu.com/index.com 请求 http://ww.bai.com/service.php
常用解决跨域问题的方法：
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
是被包含在函数调用中的JSON，例如：

callback({"name":"bob"});

JSONP有两个部分组成：回调函数和数据。下面是一个典型的JSONP请求：

http://freegeoip.net/json/?callback=handleResponse