1.jquery中使用ajax。
1）jquery.ajax
$.ajax({
url:require_pro.url,
async:true,
success:function(data){
var json_pro = JSON.parse(data);
str = "";
//like骨架
str += "<li><a href=\"\"><img src=\"\"><p></p><span class=\"pro-money\">￥<span></span></span></a></li>" +
"<li><a href=\"\"><img src=\"\"><p></p><span class=\"pro-money\">￥<span></span></span></a></li>" +
"<li><a href=\"\"><img src=\"\"><p></p><span class=\"pro-money\">￥<span></span></span></a></li>" +
"<li><a href=\"\"><img src=\"\"><p></p><span class=\"pro-money\">￥<span></span></span></a></li>" +
"<li><a href=\"\"><img src=\"\"><p></p><span class=\"pro-money\">￥<span></span></span></a></li>";
//创建like骨架；
$elem.html(str);
//修改骨架中从服务器返回的图片地址，商品名以及商品价格；
var img_src = [],
p_name = [],
p_money = [];
for( var key in json_pro) {
img_src.push(json_pro[key].src);
p_name.push(json_pro[key].name);
p_money.push(json_pro[key].rmb);
}
$elem.find(‘li‘).each(function(index, elem) {
$(this).find(‘img‘).attr(‘src‘,img_src[index]).end()
.find(‘p‘).text(p_name[index]).end()
.find(‘.pro-money span‘).text(p_money[index]);
});
}
});
2）jquery.get
$("button").click(function(){
$.get("demo_ajax_load.txt", function(result){
$("div").html(result);
});
});
2.原生js下的ajax代码：
思路：
1）获取XMLRequest对象；（做IE的兼容）
2）监听XMLRequest对象的onreadyStateChange方法，判断status与readyState的状态，然后处理获取到的数据（json格式）；
3）执行XMLRequest对象的open方法，open（method, url, callback,async）;method为get或post方法，url为请求路径，callback为请求成功时执行的回调函数,async为布尔(true为异步，false为同步);
4）执行XMLRequest对象的send方法，内容为发送到服务器的字符串; send(null);