Ajax前后台数据交互

Ajax全称为“Asynchronous Javascript and XML”（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。他的出现揭开了无刷新页面的新时代。

Ajax的优势与不足

优势：

1. 不需要任何浏览器插件支持，就可以被绝大多数浏览器支持。
2. 优秀的用户体验，能在不刷新整个页面的前提下更新数据，是web应用程序能迅速回应用户操作。
3. 提高web应用性能，传统模式数据提交是通过表单（from）来实现的，而数据获取是靠全页面刷新来重新获取整夜的内容。Ajax模式只是通过XMLHTTPRequest对象向服务器提交希望提交的数据，即按需发送数据。
4. 减轻服务器和宽带的负担。

不足：

1. 不同版本的浏览器对XMLHTTPRequest对象支持度不足，需要考虑兼容性问题。
2. Ajax只是局部刷新,所以页面的后退按钮是没有用的。
3. 对搜索引擎的支持的不足，因为搜索引擎爬虫还不能理解那些奇怪的js代码和因此引起的页面内容的变化。
4. 开发和调试工具缺乏。

总结：ajax还是很好用的，优势更胜于不足。

Ajax原生写法

Ajax的核心是XMLHttpRequest对象，它是实现Ajax的关键----发送异步请求、接收响应及执行回调都是通过他实现的。

function getXMLHttpRequest() { //这个函数做兼容进行处理，获取XMLHttpRequest对象
        var xmlhttp; 
        if(window.ActiveXObject) { //IE5 IE6 是以ActiveXObject 的方式引入XMLHttpRequest对象的
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
        }else if (window.XMLHttpRequest) { //XMLHttpRequest是window子对象
                xmlhttp= new XMLHttpRequest(); //实例化一个XMLHttpRequest对象
        }else { 
                xmlhttp= null; 
        } 
        return xmlhttp; 
} 
    
function getData() { 
        var xmlhttp = getXMLHttpRequest(); 
        xmlhttp.open("get","http://localhost:3333/info",true);
　　　　 //调用open方法并采用异步方式  true 异步  false同步
        xmlhttp.send();//因为采用get，所以可以不指定参数或使用null参数
        //xmlhttp.setRequestHeader("Content-Type", "application/json");  
        //使用contentType: “application/json”则data只能是json字符串
        //xmlhttp.send(JSON.stringify({"name":"John", "age":"24"}));//post请求传入string
        xmlhttp.onreadystatechange= function() { //当请求状态readystate变化会触发该函数
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                //在处理相应之前，处理器会先检查readyState的值和HTTP状态，当请求完成加载（readyState值为4）并且响应成功（HTTP状态值为200）就可以响应数据 了
                console.log(xmlhttp.responseText); //这边接收的是字符串也可以是responseXML
            } 
        }; 
}             

 jQuery写法

function imgList(){
    $.ajax({
            type:"get",  //请求方式   get查询  post增加  put修改   delete删除
            url:"http://localhost:3333/home",//请求路径
            async:true,  //异步
           // data:data, //发送到服务器的数据
            dataType:'json',  //返回值类型为json对象
            success:function(res){   //成功时  res 响应数据
                console.log(res);
                if(res.status == '1'){
                    if(res.result.length>0){
                        $.each(res.result,function(index,item){
                            $(".index-main ul").append('<li class="lists">'+'
　　　　　　　　<img src="'+item.product_img_url+'" width="150" height="150">'+'
　　　　　　　　<label>'+'<b class="discount">'+item.product_uprice+'</b>'+'
　　　　　　　　<span class="price-text">'+item.product_price+'</span>'+'
　　　　　　　　</label>'+'
　　　　　　　　</li>')；
                        })；
                    }else {
                        alert("没有数据了")
                    }
                    
                }
            },
            error:function(error){ //失败时打印错误信息
                console.log(error)
            }
        })
}