Ajax(1)

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）

Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

Ajax不属于JS核心语法（ECMA Script），只是浏览器提供的一个普通对象，对象身上有很多属性和方法，利用这些属性和方法，前端可以和后端进行数据交换

异步JavaScript：JavaScript的代码都是至到而下执行的，如果一块代码没有执行完毕，那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行

ajax作用： js与后端进行数据交互的一种技术，通过请求协商好的接口，来获取到想要的数据

优点：传输数据时候会在本页面请求服务器，不用跳转页面，从而减轻服务器压力。做到实时验证，减少用户返工率且优化用户体验

 ajax数据交互流程

5个步骤，相当于生活中的打电话：

1、创建一个ajax对象           买了一个电话

2、填写请求地址                 输入号码

3、发送请求                       拨号

4、等待服务器响应              等待

5、接收数据                       通话

XMLHttpRequest对象的兼容性

IE6下没有XMLHttpRequest对象，可以使用new ActiveXObject('Microsoft.XMLHTTP');来替代

GET请求和POST请求的区别

事实上，HTTP请求有八种之多，分别是：OPTIONS、HEAD、GET、POST、PUT、DELETE、TRACE、CONNECT

 但目前阶段我们只要了解其中的GET 和 POST方式，最常用的也是这两种方式。

 一般来说，不涉及隐私消息的查询用get方式，比如百度搜索

添加、修改、校验等用POST，比如注册用户名，修改密码，登录 

 get方式

              1、通过地址栏信息进行数据传输，传输的大小有限制

              2、不安全，用户的所有信息都会暴露出来

              3、拼接数据的时候要用encodeURI转一下码，不然有中文就会乱码

              4、不用设置请求头

              5、数据拼接在open方法里

              6、会有浏览器缓存问题

  post方式

              1、通过send向服务器传输数据，理论上来说是没有长度或体积限制

              2、相对来说安全，因为不直接暴露用户信息

              3、不用转码，已经通过请求头设置了数据格式，不会有乱码

              4、在send()的前面需要设置一个请求头（不设置要出错）

                 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

              5、数据要拼接在send方法里

              6、没有浏览器缓存问题

 get转码问题：如果用get方式向服务器发送请求，请求中带有中文参数，需要使用encodeURI()方法对参数进行编码操作

 post发送请求的时候一定要在发送前设置一下请求头，告诉后台你的数据是放在哪里的：

ajax对象.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

 同步与异步：代码执行的一种模式

同步

       1、当send()方法调用后会等待服务器返回信息，如果服务器一直没有响应，就会阻塞后面的代码，后面的代码就不会执行

       2、后面的代码执行受前面代码的影响，前面的代码没跑通，后面的代码就不会执行  

异步

        1、当send()方法调用后，就会执行后面的代码，不用等待服务器的响应

        2、后面的代码执行不受前面代码的影响

举例：肯德基买汉堡，点单与取汉堡

onreadystatechange与onload事件 

jax对象.readyState     AJAX运行步骤(第一步捕捉不到)

           它的值为4的话说明AJAX已经运行完成

           0    初始化        还没有调用open()方法

           1    载入       已调用send()方法，正在发送请求

           2    载入完成   send()方法完成，已收到全部响应内容

           3    解析       正在解析响应内容

           4    完成       响应内容解析完成，可以在客户端调用了

         ajax对象.status      服务器对请求的反馈(状态码)

             200就是成功的，404就是错误的

         onreadystatechange    

             readyState的值发生改变时触发的事件，只要这个值有变化就会触发

         onload

           所有请求成功完成后触发，此时readystate的值为4

             （IE678不支持）

         （新的XMLHttpRequest不推荐用onreadystatechange，使用onload）