AJAX, callback,promise and generator

AJAX with jQuery 

?

1 2 3 4 5 6 7 8 9 10 11

$.ajax({ 　　url:?? 　　, 　　type:?? 　　, 　　data:?? 　　, 　　success: function(){??} //callback 　　, 　　error:function(jqXHR,textStatus,error){??} })

 　think about what AJAX wants from human ,

　　AJAX asks questions :

　　tell Me By Which Way You Want To Do Things : —— 'GET or POST' ,

　　tell Me Where The Address Is  —— url ,

　　tell Me What Data You Want To Get From Or Post On The Server ?——  data ,

　　what Do You Want To Do With The Data After Getting Or Posting It Successfully And What If An Eerror Occur? —— callbacks

 

AJAX with JS 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

window.onload = function(){   　　var xhttp = XMLHttpRequest(); 　　// create an AJAX object ...一般要功能检测IE AcitveXObject,其他 XMLHttpRequest   　　xhttp.open("Get","uri",true); 　　// Set AJAX request ————how ,where, async or sync 　　//如果是‘POST’，则必须设置首部,设置返回内容的编码类型。 　　//xhttp.setRequestHeader（"Content-Type", "application/x-www-form-urlencoded;"）   　　xhttp.send(); 　　//send AJAX request and with (data) if u are posting data to the server.   　　xhttp.onreadystatechange=function(){ 　　//readystate状态一有改变的话，就执行这个匿名函数,所以会执行4次 　　　　if( xhttp.readystate== 4 && xhttp.status==200){ 　　 /*一般是检测到readystate为4， 　　　　　且status 返回200时，（HTTP状态码 200代表处理成功OK，404找不到文件等等）， 　　　　　再执行真正的callback处理返回的数据；*/   　　　　　　　　callback(xhttp.response) 　　　　　　　//and if it's json data ,u would have to use JSON.parse 　　　　　　} 　　} }

如果需要多个AJAX 请求的话，为了避免写出 callback hell 可以用promise 对象，和 generator.

1，promise 一般是用new 创建Promise对象，

在promise对象上用then（callback）来处理数据，// then在这里，大概就是然后的意思。

如果后面还有AJAX request的话，则可以在callback 内部 return 新的 new Promise 对象，然后对执行后返回的promise对象使用.then(callback)方法。

Promise机制 是链式的。

2，generator 生成器 ——— function*(yield  ??){} 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var myGenerator = function*(){   　　var data1 = yield $.get(url1); 　　//do sth with data1 　　var data2 = yield $.get(url2);   　　var data3 = yield $.get(url3)   }   wrapGener (myGenerator) // 把generator 传递给 wrapGener   function wrapGener ( generator ){   　　var gener = generator(); //生成生成器 　　return handleGenerator(gener.next()) //调用next方法，传递生成的对象 Object{value:"??",done:false} 给handleGenerator。 　　　　function handleGenerator(yieldedObj){ 　　　　　　if( !yieldedObj.done){//如果生成器没有执行完毕   　　　　　　　　yieldedObj.value.then(//执行callback   　　　　　　　　　　function(data){ // callback 的参数 Object.value 　　　　　　　　　　return handleGenerator(gener.next(data))//递归 返回这次的object.value 给gener，赋值给包含yield的变量。并且再次调用gener的next生成新的对象。 　　　　　　　　　}) 　　　　　　 　　　　　　　　} 　　　 　　　　　} }

　　var gener = generator();

//call 一个生成器并不会立刻执行，而是准备执行，有点像new func() 的创建对象，但是并没有new关键字 。

只有call了gener .next()方法，生成器才会开始执行，但是，执行到有 yield 关键字 的地方会暂停，而且，会返回 yield 后面的值。

// yield 差不多就是 return for now .

如果在执行过程中，遇到 N个 yield AJAX request ，则需要调用N个.next()方法。

一般是在检测 yield 返回的对象的done属性不为真 ，也就是说生成器还没有执行完毕。Object.done == false 的情况下调用下一个next方法。

yield 返回给调用者的是一个有着2个属性的对象，Object{value:"??",done:false}

而 Object.value 里面的值就是 yield 后面的 AJAX request 了，也就是服务器返回的内容。

对 Object.value 调用.then(callback)方法，就可以使用内容了。

可以在callback function内部用递归的方式，再次调用 gener .next(value) ,这个时候会返回object.value里面的值给gener，然后generator继续执行。