Ajax

AJAX load() 方法

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

语法：

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

语法解释：

• 必需的 URL 参数规定您希望加载的 URL。
• 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
• 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

使用示例：

$("button").click(function(){
		$("#div1").load("demo.txt");
	});

XML对象

XML ：可作为ajax交互数据的数据类型，当然也不仅局限于xml，像我们所知的json,jsonp,html,script,text都可以作为数据类型。

XML属性和方法

属性	描述
readyState	HTTP 请求的状态
responseText	响应体（不包括头部）
responseXML	对请求的响应，解析为 XML 并作为 Document 对象返回。
status	由服务器返回的 HTTP 状态代码，如 200 表示成功
statusText	这个属性用名称而不是数字指定了请求的HTTP的状态代码。也就是说，当状态为200的时候它是"OK"，当状态为404的时候它是 “Not Found”

方法：

方法	描述
abort()	取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders()	把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader()	返回指定的 HTTP 响应头部的值。
open()	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send()	发送 HTTP 请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体。

应用示例：

$(function(){
		$("button").click(function(){			
			$("#div1").load("demo.txt",function(responseText,statusText,xhr) {
			   if(statusText=="success"){
				alert("外部文件加载成功！")
			  }
			  else(statusText=="error") 
			  	alert("Error:"+xhr.status+":"+xhr.statusText);
			});
		}); 
	});

AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET和POST的区别：

相同点：

Get和Post都是用来获取和提交数据的一种方法，两者都可以实现与服务器的通信

不同点

	GET	POST
缓存	GET 方法可能返回缓存数据	POST 方法不会缓存数据，并且常用于连同请求一起发送数据
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

$.get() 方法

语法：

$.get(URL,callback);

使用示例：

$.get("demo.text",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});

$.post() 方法

语法

$.post(URL,data,callback);

使用示例

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

noConflict() 方法：

noConflict() 方法是为了避免与其他javascript框架也使用$符号作为简写，导致两种不同的框架同时在使用相同的符号，有可能会使脚本停止运行；所以在使用多种框架且符号相同时，需要用到 noConflict() 方法，noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

语法：

$.noConflict();
//通过全面来代替简写
jQuery(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
   });
  )};

//自己创建简写.noConflict()可返回对jQuery的引用，可以存到变量来使用
var jq=$.noConflict();
 jq(function($) {
       	jq("button").click(function() {
       		jq("p").text("我正在码代码");
       	});
     });

//不改变快捷方式，把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
 $.noConflict();
       jQuery(document).ready(function($){
       	$("button").click(function() {
       		$("p").text("我正在码代码");
       	})
       })

ajax() 方法

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

语法：

$.ajax({name:value, name:value, ... })

获取外部数据，利用表格展示出来

 $.ajax({
            type:'GET', //请求方式
            data:{},//指定发送过去的数据类型
            url :'获取数据的存放地址',
           //解决跨域问题
           dataType: 'jsonp',  // 请求方式为jsonp,jsonp进行跨域请求 只支持get
           jsonpCallback: 'jQuery17204270111460038739_1585805432011',    // 回调函数名--存放数据的名称
           //success:当请求成功时运行的函数
           success:function(msg){
            	for(i in msg.data) {
            		var tr;
            		tr='<td>'+msg.data[i].rownum_+'</td>'+'<td>'+msg.data[i].deptname
            		+'</td>'+'<td>'+msg.data[i].deptid+'</td>'+'<td>'+msg.data[i].provdrugvisits
            		+'</td>'+'<td>'+msg.data[i].visits+'</td>'+'</td>'+'<td>'+msg.data[i].ratio+'</td>';
            		$("#tabletest").append('<tr>'+tr+'</tr>');
            	
            	}
            	
            }

});

生成Ajax异步请求示例

$("button").click(function() {
	  	 $.ajax({
	  		url:"demo.txt",
	  		async:true,//异步请求
	  		success:function(result) {
	  			$("div").html(result);
	  		}
	  	});
	 });

生成带有指定参数的Ajax请求示例：

	$("button").click(function() {
      		$.ajax({
      			url:"js/demo.js",

               //预期的服务器响应的数据类型为script
      			dataType:"script"
      		});
      	});

js代码

window.alert("该 JavaScript 脚本通过 AJAX 加载后执行");

getScript() 方法

getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

语法：

$(selector).getScript(url,success(response,status));

$("button").click(function() {
  $.getScript("js/demo.js");
 	});
  })

param() 方法

param() 方法创建数组或对象的序列化表示形式。

语法

$.param(object,trad)

使用示例

 $(function() {
      	personObj=new Object();
      	personObj.firsrName="John";
      	personObj.lastName="Doe";
      	personObj.age=50;
      	personObj.eyeColor="blue";
      	$("button").click(function() {
      		//param() 方法创建数组或对象的序列化表示形式。
      		$("div").text($.param(personObj));
      	})
      })

ajaxSuccess() 方法

ajaxSuccess() 方法规定 AJAX 请求成功完成时运行的函数。

语法：

$(document).ajaxSuccess(function(event,xhr,options))

使用示例

//当 AJAX 请求成功完成时，触发一个提示框：
$(function() {
     	$(document).ajaxSuccess(function() {
     		alert("Ajax请求成功！！")
     	})
     	$("button").click(function() {
     		$("div").load("demo.txt")
     	})
     })

提示：有时候在Chrome是请求不成功的，会出现跨域问题，只要在Chrome快捷方式属性的目标中加入"–allow-file-access-from-files"即可运行成功，如果还是不成功就用edge打开。