关于jQuery中的$.ajax()使用过程中的一些感悟

完成了很久的一个购买页面，后台跟我讲说：购买专区上的省市与线索库的不太一致，对获取线索的准确性造成一定的问题。所以现在对应的省市项，得是后台先传数据给我，然后我在页面展示完呈现给用户。

很自然的就想到使用jsonp进行跨域的数据传输。基本想法:页面加载完之后，通过$(document).ready($.ajax())进行数据的获取，然后create新的省份项province；然后根据用户选择的省份，利用province.onchange事件来选择对应的城市项进行渲染呈现，这就是基本的思路。

于是在jQuery中的ajax里面赋值对应的url，并将dateType设置为jsonp才可以跨域。要么页面会显示请求被拒绝的错误。这里有两个参数jsonp和isonpCallBack。这两个参数别分表示:你传给后台服务器的函数参数，当后端收到这个参数的值得数据，会将请求对应的数据包裹到这个函数中，回传给浏览器客户端。默认情况下jQuery会给这两个参数默认值为callback。当调用成功之后就会触发success函数，失败的话会调用error函数。

当编号程序实际测试的时候，问题出现了，本来应该是要等数据获取到之后，才加载省份项，但是发现ajax数据还没获取完，页面展示的环节已经实现，导致页面无法按指定的思路呈现。所以决定让ajax的过程为同步，设置async:false，也就是等待ajax过程完成之后才执行下面的js代码。但是仍然有问题，效果一样。也就是后面的js代码没有等到ajax完成便执行了。

为了解决这个问你，查看jQuery之后发现，设置async:false;可以实现ajax的同步，但是对于jsonp类型不管用。因为jsonp传输的是js的函数代码而不是等待的数据，所以无法控制，它的实现不是通过XMLHttpRequest对象进行的。为了解决这个问题，只能将省份项的初始化工作放在success中执行，这样便解决了问题。

为了在选择对应省份项的时候只联动自己的城市项，所以每次都要清除一下cities项中的城市选项。本来使用的是removeChild一个节点一个节点的删除，能够实现此功能。后来灵机一动，可以使用length属性来删除所有的子节点项。主要将length属性设置为0即可。

关于新的实现方法这样就可以解决问题了。