Jquery——Day4（Ajax基本用法get/post/ajax/serialize等）

Bertha 。 2022-07-10 04:15 232阅读 0赞

Ajax，全称为“Asynchronous Javascript and XML”（异步的Javascript和XML），它不是一种Javascript的单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。  
一般使用Ajax，实现无刷新状态更新页面，并且实现了异步提交，提升了用户体验。  
（1）Ajax优势：  
a、不需要插件支持  
b、用户体验极佳（不刷新界面即可获取可更新的数据）  
c、提升web程序的性能（传递数据时是按需传递，不需整体）  
d、减轻服务器和带宽的负担（将服务器操作转到客户端）  
  
  
（2）Ajax不足：  
a、不同版本的浏览器XMLHttpRequest对象支持不足（如IE5之前）  
b、前进、后退功能被破坏  
c、搜索引擎的支持度不够（由于引擎爬虫还不能理解JS引起变化数据的内容）  
d、开发调试工具缺乏  
  
  
（3）异步与同步有什么区别呢  
同步：一段程序执行完才能执行下一段  
异步：可以同时执行多条任务  
在Ajax中使用同步，会产生“阻塞模式”，类似于假死状态，所以，在Ajax中大部分使用异步模式。  
  
  
在jQuery中对于Ajax的使用一般采用$.ajax()方法

$(function(){
    	$('input').click(function(){
    		$.ajax({
    			type:'POST',
    			url:'test.php',
    			data:{
    				'baidu.com'
    			},
    			success:function(response,status,xhr){
    				$('#box').html(response);
    			}
    		});
    	});
    });

1、load()方法  
jQuery对Ajax做了大量的封装，使用起来较为方便，不必考虑浏览器兼容性。  
对于封装的方式，jQuery采用三层封装：最底层（$.ajax()）,而这层封装了第二层有三种方法：load()、$.get()、$.post()，最高层是$.getScript()、$.getJSON()。  
结构：load(url\[必须，请求html的url地址，string类型\],\[,data\] \[,callback\])  
data——Object类型，发送至服务器的key、value数据  
callback——Function，请求完成时的回调函数，无论请求或失败。  
若要异步加载数据，

利用jQuery中的load()方法实现异步加载，如下：

$(function(){
    	$('input').click(function(){
    		$('#box').load('test.html');
    	});
    });

在test.html中代码如下：

<span class="title">百度</span>
    <span class="url">www.baidu.com</span>

如果是服务器文件，比如说php文件。一般不需要载入数据，还需要向服务器提交数据，那么就需要有第二个参数data。向服务器提交数据有两种方式：get、post

$('input').click(function(){
    	$('#box').load('test.php',{
    		url:'baidu.com'
    	},function(reponse,status,xhr){
    		$('#box').html(response+'123');
    	});
    });

response回应的状态有两种：success、error；  
xhr（XMLHttpRequest）属性为：  
（1）responseText：作为响应主体被返回的文本、  
（2）responseXML：如果响应主体内容类型为“text/xml”，则返回包含响应数据的XML DOM文档  
（3）status：响应的HTPP状态、  
（4）statusText：HTTP状态的说明。  
  
  
2、$.get()、$.post()  
二者比$.load()多了一个参数“type”，表示传递的数据类型  
A.$.get()  
（1）通过直接在url问号紧跟着传参

$(function(){
    	$('input').click(function(){
    		$.get('test.php?url=baidu',function(response,status,xhr){
    			$('#box').html(response);
    		});
    	});
    });

（2）通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号紧跟传参

$('input').click(function(){
    	$.get('test.php',{
    		url:'baidu'
    	},function(trsponse,status,xhr){
    		$('#box').html(response);
    	});
    });

B、$.post()  
（1）post提交不能使用问号传参

$('input').click(function(){
    	$.post('test.php','url=baidu',function(response,status,xhr){
    		$('#box').html(response);
    	});
    });

（2）post提交可以使用字符串的形式进行传参数，自动转换为http消息实体传参

$('input').click(function(){
    	$.post('test.php',{
    		url:'baidu'
    	},function(response,status,xhr){
    		$('#box').html(response);
    	});
    });

post提交可以使用对象键值对。  
  
  
注意：$.get()、$.post()区别  
（1）GET请求是通过URL提交的，而POST请求是HTTP消息实体提交的；  
（2）GET提交有大小限制（2kb），而POST不受限制；  
（3）GET方式会被缓存下来，可能有安全问题，而POST没这个问题；  
（4）GET方式通过$\_GET\[\]获取，POST方式通过$\_POST\[\]获取。  
  
  
  
  
C、数据格式  
（1）HTML片段  
由于服务器返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML数据插入到主页面中。（见上面案例“.html(data)”所示）  
它实现需要很少的工作量，但这种固定的数据结构并不一定能在其他的Web应用程序中得到重用。  
  
  
（2）XML文档  
在jQuery中，处理xml与html文档相同，也可以使用常规的attr()、find()、filter()以及其他方法。

$('input').click(function(){
    	$.post('test.xml',function(response,status,xhr){
    		alert(response);
    	},'html');             //默认type是xml；
    });

若默认值type为xml，即强行设置为html，则连xml标签也返回。  
  
  
将上述alert语句代码改为“alert($(response).find('root').find('url').text())”  
  
  
（3）JSON文件  
由于服务器返回的数据格式是JSON，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页面中。

$('input').click(function(){
    	$.get('test.php',{
    		username:$('username').val() ,
    		content:$('#content').val
    	},function(data,status){
    		var username=data.username;
    		var content=data.content;
    		var txtHtml="<h6>"+username+":</h6><p>"+content+"</p>"
    	},"json");
    });

在上述代码中，$.get()方法第4个参数（type）设置为“json”代表期待服务器端返回的数据格式。  
  
  
注意：这3种格式的比较——  
首先，HTML片段来提供返回数据最简单；  
若数据需要重用，那么JSON文件将是不错的选择，无论性能还是大小都占有很大的优势；  
当远程应用程序未知时，XML文档是明智的选择，是web领域的“世界语”。  
  
  
3、表单序列化  
3-1：首先，以一个简单的form表单为例

3-2：后台服务器端user.php代码如下：

<?php
    	echo $_POST['user'].'-'.$_POST['pass'];
    ?>

3-3：在jQuery中，对Ajax进行操作，如下：

$(function(){
    	$('form input[type=button]').click(function(){
    		alert("");
    		$.ajax({
    			type:'POST',
    			url:'user.php',
    			data:{
    				user:$("form input[name=user]").val(),
    				pass:$("form input[name=pass]").val(),
    			},
    			success:function(response,status,xhr){
    				$('#box').html(response);
    			}
    		});
    	});
    });

综上所述，当有多个表单的情况下，较为复杂，容易出错，即复制提交的JS内容时，data属性修改的东西就非常多。所以，需要表单序列化“serialize()”的概念。  
（1）serialize()方法  
由于怕冗余出错的问题，把上述ajax代码中传递数据data改为表单序列化，如下：

$.ajax({
    			type:'POST',
    			url:'user.php',
    			data:$('form').serialize(),
    			success:function(response,status,xhr){
    				$('#box').html(response);
    			}
    	});

同时，它还可以对单选框、复选框进行表单的序列化

$('form input [name="sex"]').click(function(){	
    	$('#box').html($(this).serialize());
    });

（2）serializeArray()方法  
该方法与serialize()方法区别在于，它不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。

var sex=$(':radio').serializeArray();
    console.log(sex);

（3）ajaxSetup()方法  
有时候，需要在同一个程序中多次调用ajax()，而他们很多参数都相同，这个时候jQuery提供的$.ajaxSetup()请求默认值来初始化参数。

$('form input[type=button]').click(function(){
    	$.ajaxSetup({
    		type:'POST',
    		url:'test.php',
    		data:$('form').serialize();
    	});
    
    
    	$.ajax({
    		success:function(response,status,xhr){
    			alert(response);
    		}
    	});
    });

（4）$.param()方法  
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

var obj={a:1,b:3,c:3};
    var k=$.param(obj);
    alert(k);

结果：a=1&b=2&c=3  
该方法最主要的作用是解析键值对。  
  
  
4、getScript()、getJson()  
（1）$.getScript()  
有时候，在页面初次加载时就取得所需的全部Javascript文件是完全没有必要的。  
jQuery提供了$.getScript()方法来直接加载js文件  
（2）$.getJson()  
该方法用于加载JSON文件，与$.getScript()方法的用法相同。

$(function(){
     $('#box').click(function(){
     $.getJSON('test.json');
     });
    });