Ajax与jQuery的使用方法

XMLHttpRequest

var xhr = new XMLHttpRequest(); //首先创建XMLHttpRequest 的对象
xhr.open("GET","js/data.json",true);//再对这个对象的open方法放入参数， 请求方式：get/post  ，请求地址：url  ，是否异步：true/false
xhr.send(null);//发送请求，参数为向服务器传递的参数。

xhr.onreadystatechange=function(){
　　if(readystate==4){
　　　　if(status==200){
　　　　　　console.log(xhr.responseText);
　　　　}
　　}
}

GET 与 POST

　　在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用 的过程中，GET 的使用频率要比 POST 高。那么什么是GET和POST呢？下文揭晓。

　　GET 请求

　　　　GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时， 可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get','diner/login?'+'name=Lee&age=100',true); 
　　//一个通用的 URL 提交函数 
　　function addURLParam(url, name, value) {    
　　//判断的 url 是否有已有参数  
　　url += (url.indexOf('?') == -1 ? '?' : '&');      
　　url += encodeURIComponent(name) + '=' + encodeURIComponent(value);  
　　return url; 
}

 　　POST 请求

　　　　POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是 使用的 POST 传输方式。

xhr.open('post', 'diner/login', true); 

对Ajax的封装

function ajax(obj) {
            
            // 创建XMLHttpRequest
            var  xhr = new XMLHttpRequest();
            
            // 得到url
            var url = obj.url; // js/data.json?id=1
            var params = obj.data; // uname=zhang&upwd=123
            
            // 判断请求方式
            if (obj.method == "get") {
                url += url.indexOf("?") == -1 ? "?" + params :  "&" + params;
                // 打开请求 open(method,url,async)
                xhr.open(obj.method,url,obj.async);
                // 发送请求
                xhr.send(null);
            } else {
                // 打开请求 open(method,url,async)
                xhr.open(obj.method,url,obj.async);
                // 模拟表单提交
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 发送请求
                xhr.send(params);
            }
            
            // 监听请求状态
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) { // 请求成功
                    callback(); // 调用回调方法
                }
            }
            
            function callback() {
                if (xhr.status == 200) { // 响应成功
                    // 调用对象的方法
                    obj.success(xhr.responseText);
                } else { // 响应失败
                    alert("响应状态：" + xhr.status + ",错误信息："+xhr.statusText + "，说明：" + xhr.responseText);
                }
            }
            
        }
        

 jQuery的Ajax的使用方法

  $.ajax
   *  格式：$.ajax({})
   *  type:请求的方式GET/POST
   *  url:请求的路径
   *  data:传给服务器的数据
   *  dataType:服务器返回数据的类型，常用json，如果出现跨域问题设置为jsonp
   *  async:是否异步，默认是true表示异步
   *  success:请求成功时调用的函数
   *  error:请求失败时调用的函数

　　　　

$.ajax({
            type:"get",
            url:"js/data.json",
            data:"",
            dataType:"json",
            success:function(result){
                console.log(result);
                console.log(result.uname);
                // 得到div对象
                var div = $("div");
                var unameHtml = "姓名：<input type='text' value='result.uname' />";
                var upwdHtml = "密码：<input type='password' value='"+result.upwd+"' />";
                div.append(unameHtml);
                div.append(upwdHtml);
            }
        });

$.ajax({
            type:"post",
            url:"http://localhost:8080/xwc/account",
            data:"",
            dataType:"jsonp",
            success:function(result){
                console.log(result);
                // 创建一个table对象
                var table = $("<table border='1px'></table>");
                
                var tr = "<tr><td>账户</td><td>类型</td><td>金额</td><td>备注</td></tr>";
                table.append(tr);
                
                // 循环得到后台返回的数据
                for(var i = 0; i < result.length; i++){
                    var tr2 = "<tr><td>"+result[i].accountName+"</td><td>"+result[i].accountType+"</td><td>"+result[i].money+"</td><td>"+result[i].remark+"</td></tr>";
                    table.append(tr2);
                }
                
                // 将table追加到页面中
                $("body").append(table);
            }
        });

Jquery中的$.get()使用细则

<script type="text/javascript">
        /**
         * $.get请求  
         *     发送请求方式是get方式
         *     格式：$.get("请求的路径","请求参数","回调函数")
         */
        /**
         * 直接发送请求，忽略返回值
         */
        $.get("js/data.json");
        
        /**
         * 发送请求，传递参数，忽略返回值
         */
        $.get("js/data.json",{"uname":"zhangsan"});
        
        /**
         * 发送请求，无参数，有返回值
         */
        $.get("js/data.json",function(data){
            console.log(data);
        });
        
        /**
         * 发送请求，传递参数，有返回值
         */
        $.get("js/data.json",{"uname":"zhang"},function(data){
            console.log(data);
        });
        
        /**
         * 发送请求给远程服务器
         *     跨域问题需要设置jsonp
         */
        $.get("http://localhost:8080/xwc/account",function(data){
            console.log(data);
        },"jsonp");
    </script>

Jquery中的post

<script type="text/javascript">
        /**
         * $.post
         *     发送的请求方式是post方式
         *     如果出现跨域问题，需要在回调函数之后设置jsonp
         */
        $.post("http://localhost:8080/xwc/account",{},function(data){
            console.log(data);
        },"jsonp");
 /**
   * $.getJSON：返回接收的数据是json格式
   */
  $.getJSON("js/data.json",{},function(data){
   console.log(data);
  });
    </script>