ajax在原生js与jquery中的使用

Posted 2020-08-01

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);