ajax

参考自阮一峰JS教程
AJAX成为了javascript脚本发送HTTP请求的代名词，可同步可异步，一般指异步，同步会阻塞
基本四步骤：
1.创建AJAX对象
2.监听事件
3.open
4.send

经常用法

var xhr = new XMLHttpRequest();

// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200 || xhr.status === 304){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET', '/endpoint', true);

// 发送HTTP请求
xhr.send(null);

XMLHttpRequest对象

//从创建这个对象开始，后面的很多东西都是它的实例，
不要问这个对象从哪来，把它看成和date,Arry之类的就好了
var xhr=new XMLHttpRequest()

XMLHttpRequest对象的属性

readyState

表示XMLHttpRequest请求当前所处的状态（也可以看作请求的进度条），在请求的时候，它的状态会自己变化

0:UNSENT XMLHttpRequest对象已经生成，但是open()方法还没有被调用
1:opened open()方法已被调用，但是send()方法还没被调用
2：HEADERS_RECEIVED，表示后端的send方法已经调用，头信息和状态码已经收到
3：LOADING，表示正在接收服务器传来的数据
4：DONE表示服务器已经完全接收或者接收失败

onreadystatechange

//这个请求指向一个函数
xhr.onreadystatechange=function(){}  
//请求时，readyState会变化，
每变化一次，这个函数就会被调用一次

response基友群

responseType用来指定返回数据的类型，可以是字符串，JSON，ArrayBuffer对象.Dom对象等
responseXML属性返回从服务器接收到的Document对象
responseText从服务器接收到的字符串，我们用到最多的还是它了

status好姐妹

status
HTTP请求得到的状态码，最多用到的是200，访问正常
304:  not Modified未修改（从缓存过去）
404 : not found未发现网址
500 ： 服务器发生错误
//基本上只有2xx和3xx的状态码表示正常

statusText
同样表示HTTP状态，返回一个字符串
和status不同的是，他还包含状态信息，比如'200 OK'

XMLHttprequest方法

open()

配置HTTP请求参数
常用参数有open(method,url,true/false，username,password)
请求的方法，地址，是否异步，默认为true（异步）,用于验证的用户名和密码

send()

注意：所有监听事件，必须在send()方法调用前设定

实际发出http请求
send方法可以发送多种数据，包括表单，文件等

如果不带参数，表明HTTP请求只包含头部信息，也就是只有一个URL，常用于GET请求
如果带参数，表示除了头信息，还有具体数据，常用于POST请求

jQuery ajax写法

$.ajax({
  method:'GET',
  url:'',
  data:{}
}).done(function(result){console.log(result)}).fail(function(){
})

JQ发送JSONP

请求这个接口后得到
func({数据})
$.ajax({
    url:'http://platform.sina.com.cn/slide/album_tech',
    dataType:'jsonp',  
    jsonp:'jsoncallback',
    data:{
        app_key:'1271687855',
        num:'3',
        page:'1'
    }         //会请求 http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4
}).done(function(ret){
    console.log(ret)
})

实例

//使用ajax模拟 加载更多




  
  
  



  
    
      新闻1
    
    
      新闻2
    
    
      新闻3
    
    
      新闻4

//后端 router.js
app.get('/loadMore',function(req,res){

  var curIdx=req.query.index
  var len=req.query.length
  var data=[]

 for(var i=0;i