Ajax

Asynchronous JavaScript and XML

异步的javascript和XML

1. ajax历史

ajax是在2005年由google的Jesse James Garrett发表了一篇文章中提出的，它依赖于XMLHttp实现的，XMLHttp是1998年由微软提出的，google用ajax开发Google Maps等产品，运用若干年之后，才在文章中发表，那么其实ajax是给Google Maps这样的复杂应用而生的

2. GET 与 POST

• 基本概念
  HTTP GET 方法请求指定的资源。使用 GET 的请求应该只用于获取数据。
  HTTP POST 方法 发送数据给服务器。
• 安全性
  POST安全性 > GET安全性
  GET发送请求参数携带在url之后 eg: www.abc.com/a.html?user=xq&age=18
  POST发送请求不是拼接在url之后，而是放在Requert header中，实例XMLHttp对象调用send方法发送数据
  GET 可以用作书签、历史而POST 不行
• 数据长度限制
  GET的参数是拼接在URL中的，理论上URL中的参数是可以无限加长的，但是这样势必会给浏览器和服务器带来很重的负担，所以业界有一种不成文的规定，大多数浏览器在URL的限制是2K，而大多数服务器的限制在64K。
  实际上在TCP(传输控制协议) / UDP(用户数据报协议) 协议中并没有规定对数据亮的限制，真正的限制是浏览器和服务器给出的限制，其实Http Get方法提交的数据大小长度并没有限制，而是IE浏览器本身对地址栏URL长度有最大长度限制：2083字符。
  对数据的编码：GET请求的携带的参数只能进行URL编码，POST的怎么可以进行二进制编码等
  性能的考虑：GET性能更为出色

3. ajax的实现

jQuery中对ajax进行了几次封装，以前在对ajax的使用仅仅依赖jq，也确实写的很完善，
但是为要明白ajax的基本实现，来源于面试题以及新语法对ajax的封装

  ajax({
	  url: myUrl,//请求地址
	  type: 'get',//请求方式
	  dataType: 'json',//数据类型,可以不指定,jq会自行判断
	  date:{key:value},//数据
	  timeout: 1000,//请求时间限制
	  success: function (data) {//请求成功的回调
		  console.log(data)
	  },
	  fail: function (err) {//请求失败的回调
	   	  console.log(err)
	  }
 })

基本流程

• 页面js脚本实例化一个XMLHttpRequest对象

• 设置好服务端给定的url、必要的查询参数、回调函数等

• 向服务端发起请求，服务端处理请求之后的结果返回给页面

• 触发原先订好的回调函数，来获取数据

  优点:
  1.页面不会刷新
  2.按需获取数据
  3.不会打断用户的操作,增强用户的体验

  步骤:

       1.创建xhr对象
           var xhr = new XMLHttpRequest();  // 低版本的IE需要做兼容处理
       2.准备发送
           xhr.open(type,url,async);        //async(true/false异步/同步)
           同步: 浏览器会锁定你当前的页面,用户必须要执行完一些操作的时候,才可以继续执行页面操作
           异步: 在发送数据请求的时候,用户还可以去进行别的操作(调试程序的时候很麻烦)
       3.发送
           xhr.send(data);
               data可以写 也可以不写
               得到几个响应信息
               responseText                服务器返回的数据(响应返回的文本)
               status                      http状态(200,400,404,500)
               statusText                  http状态的说明(ok,Bad Rquest,Not Found,服务器)
       async --- true 异步
       ajax发送数据的时候 触发一个事件 onreadystatuschange 检测readyState值

       readyState值
       0          未初始化     open()还未调用
       1          启动         open()调用 send未调用
       2          发送         send调用 还未响应
       3          接收         响应了 接收了一部分数据
       4          完成         数据接收完成

post请求的时候 设置请求头信息

        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    
        两种头信息
        请求头信息  发送给服务器的信息  可以修改但是不可以获取
        响应头信息  服务器返回给的信息  可以获取但是不可以修改
        xhr.getResponseHeader(param)    单独获取其中一个信息
        xhr.getAllResponseHeaders()     获取所有的响应信息
    	
    	encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。
    	它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。
    	为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。
    	
        get     发送数据拼接在url之后
        post    发送数据写在send里边 并且设置请求头
    
        true    多了一个监听事件onreadystatuschange 监听readystatus值得变化
        false   没问题