使用ajax的几种方式

// 使用ajax的几种方式
// 1.$.ajax()发送一个get请求，数据返回为json

  $.ajax({
   
     type: "GET",
    
     url: "select",
   //ajax请求地址  
     dataType:'json',
    
     data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象
    
     success: function(data){
  

     if(data.message==="success"){
　　　}
     console.log("返回的数据: " + data );
   
     }

});

 

// 2.$.ajax()发送一个post请求，数据返回为json

 $.ajax({
    
    type: "POST",
    
    url: "add",
    
    dataType:'json',
    
    data: {name:"张三",sex:1},//也可以是字符串链接"name=张三&sex=1"，建议用对象
    
    success: function(data){
        //实际操作的时候，返回的json对象中可能会有成功错误的判断标记，所以可能也需要判断一下
        
    console.log("返回的数据: " + data );
    
    }

});

 

// 3.$.ajax()经常用到的一个工具函数

//  ajax提交数据的时候，通常是提交一个表单，所以，序列化表单数据就非常有用，如：$("form").serialize()

 $("form").on("submit",function(){
        
    var url = this.action;   //可以直接取到表单的action
        
    var formData = $(this).serialize();
        
    $.post(
        url,
        formData,
       //$.ajax() post方法简写形式,$.post("请求url","发送的数据对象","成功回调","返回数据类型");  
        function(data){
         //返回成功，可以做一个其他事情
                
          console.log(data);
        },
        'json'
    );//返回的数据类型
        
    //阻止表单默认提交行为
        
    return false
    
})

 

// 4. $.ajax() GET方法和POST方法的简写

$.get(
    "url",
    {userID:"123"},
    function(response) {
        //回调函数方法体
    }
)

$.post(
    "url",
    {userID:"123"},
    function(response) {
        //回调函数方法体
    }
)

// XML的ajax

// 5、加载全部文本
$(".btn1").on("click",function(){
    $("#div1").load("text.html");
})
///2、加载class为url的文本
$(".btn1").on("click",function(){
    $("#div1").load("text.html .url");
})
///3、1、PHP加载全部文本
$(".btn1").on("click",function(){
    $("#div1").load("phptext.php");
})
///4、1、PHP的GET加载文本
$(".btn1").on("click",function(){
    $("#div1").load("phptext.php?url=ych");
})
///5、1、PHP的POST加载文本
$(".btn1").on("click",function(){
    $("#div1").load("phptext.php",{url:'ych'});
})

///6、1、ajax的回调函数
$(".btn1").on("click",function(){
    $("#div1").load("phptext.php",{
        url:'ych'
    },function(response,status,xhr){
        // 加载的文本信息
        // alert(response);
        // 更改文本信息
        // $("#div1").html(response+"123");
        // 状态成功200 成功success 失败error
            // alert(status);
        if(status=="success"){alert("这是成功的返回数据");}

        // xhr对象的总属性
        // 作为响应主体返回文本
        // alert(xhr.responseText);

        // 返回响应数据XML DOM文档
        // alert(xhr.responseXML);

        // 状态成功200
        // alert(xhr.status);
            // HTTP状态说明
        // alert(xhr.statusText);

    });
})

///7、xml的ajax标准写法
btn.οnclick=function(){
    // 一、创建XMLHttpRequest对象实例
    // var xhr=new new XMLHttpRequest();
    // 兼容写法
    var xhr;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        // ie5.ie6的情况
        xhr=new ActiveXObject("Microsoft.XMLHTTP")
    }
//          规定请求的类型、URL 以及是否异步处理请求。
    xhr.open("get","data/myjson.json",true);
//          将请求发送到服务器。
    xhr.send();
//          每当 readyState 属性改变时，就会调用该函数
    xhr.onreadystatechange=function(){
//              当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
        if(xhr.readyState==4 && xhr.status==200){
            var did=document.getElementById("did");
            var str=xhr.responseText;
//                  使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
            var obj=JSON.parse(str);
            did.innerHTML=obj.name;
//                  使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串
            str_pretty2 = JSON.stringify(obj, null, 4) //使用四个空格缩进
            console.log(str_pretty2);
            console.log(obj);
        }
    }
}

///8、ajax的几个步骤
function test_ajax(){
   $.ajax(
   {
      type:"GET",//通常会用到两种：GET,POST。默认是：GET
      url:"a.php",//(默认: 当前页地址) 发送请求的地址
      dataType:"html",//预期服务器返回的数据类型。
      beforeSend:beforeSend, //发送请求
      success:callback, //请求成功
      error:error,//请求出错 
      complete:complete//请求完成
   });
}
function error(XMLHttpRequest, textStatus, errorThrown){
  // 通常情况下textStatus和errorThown只有其中一个有值 
  $("#showResult").append("<div>请求出错啦！</div>");
}
function beforeSend(XMLHttpRequest){
  $("#showResult").append("<div><img src='loading.gif' /><div>");
}
function complete(XMLHttpRequest, textStatus){
  $("#showResult").remove();
}
function callback(msg){
  $("#showResult").append("<div>请求成功，回传数:"+msg+"<div>");
}

/*****************ajax的回调函数*******************/
function getServerInfo(){
if(xmlHttp.readyState==4){
var headers =  xmlHttp.getAllResponseHeaders();
//获取所有响应头信息
alert(headers);
//获取指定的响应头里面的信息
//获取时间
//alert(xmlHttp.getResponseHeader("Date"));
//获取服务器
//alert(xmlHttp.getResponseHeader("Server"));
//获取服务器脚本版本
//alert(xmlHttp.getResponseHeader("X-Powered-By"));
//获取相应头长度
//alert(xmlHttp.getResponseHeader("Content-Length"));
//获取链接状态
//alert(xmlHttp.getResponseHeader("Connection"));
//获取文档类型
//alert(xmlHttp.getResponseHeader("Content-Type"));
//获取连接持续时间
//alert(xmlHttp.getResponseHeader("Keep-Alive"));
document.myform.time.value = xmlHttp.responseText;
}
}

// XMLHttpRequest对象提供了一个设置请求头的方法:setRequestHeader，可以在beforeSend回调里面设置请求头：
beforeSend: function(xhr) {
    xhr.setRequestHeader("User-Agent", "test");
}
// W3C标准文档明确规定了以下请求头信息是浏览器控制，开发者不允许设置这些请求头，设置了会提示错误。
// 一般我们设置的是：content-type，传输数据类型，即服务器需要我们传送的数据类型
xhr.setRequestHeader ("content-type", "application/x-www-form-urlencoded" );