jquery-编程基础-jquery-AJAX-08

1、jquery ajax中的使用方式

$.ajax({
url: "服务器端接口地址",
  type:"get或post",
//如果需要传参:
data:{ 参数名1:值1, 参数名2:值2, ... },
dataType:"json", //自动调用JSON.parse()
//当请求响应成功后，自动执行
//并自动将服务器端返回的结果，经过JSON.parse()转换后，交给result参数变量
  success:function(result){
	result就是服务器端返回的结果。
  }
})

AJAX是永远的异步请求方式，作用就是为了异步获取服务器端数据；所有要在ajax请求之后才能执行的代码，必须都要放在success:function(){内部！}

2、jquery AJAX中的参数详解

在【$.ajax()】的方式中，参数，数据处理等都是以对象的方式传递的，

$.ajax({参数})

参数对象：

$.ajax({
    async:true,// 	布尔值，表示请求是否异步处理。默认是 true。
    url:'http://127.0.0.1:8080/tedu/userlist',// 	规定发送请求的 URL。默认是当前页面。
    type:get,//默认是get 	规定请求的类型（GET 或 POST）。
    dataType:'json',// 	预期的服务器响应的数据类型。
    data :{/*这里一般是表单提交的时候使用到的，使用对象的方式提交*/},//规定要发送到服务器的数据。
    contentType :'json',//	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    timeout:3000,// 	设置本地的请求超时时间（以毫秒计）。
    global:true,// 	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
    cache:true,// 	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
    context:$(this),// 	为所有 AJAX 相关的回调函数规定 "this" 值。
    beforeSend(xhr),// 	发送请求前运行的函数。
    success:success(result,status,xhr),// 	当请求成功时运行的函数。
    error:error(xhr,status,error),// 	如果请求失败要运行的函数。
    complete:complete(xhr,status)// 	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
})

3、jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

$("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

4、jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

5、jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback); 

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

6、总结

 

安全性

get方法的数据可以在地址栏看到，因为使用get方法会将查询数据拼接到地址栏

post是流方式传递，经内存，不在网址显示，安全性比get更高

大小

GET 方法因为地址栏中url的限制，传输的数据时有限的

POST 方法使用流方式传递，数据量比get更高，约为8M左右

作用

get主要可以用来获取信息，post主要用于提交信息