Jquery——Day4（Ajax基本用法get/post/ajax/serialize等）
来源：互联网 发布：apache虚拟主机不生效 编辑：程序博客网 时间：2024/05/16 01:56
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，请求完成时的回调函数，无论请求或失败。
若要异步加载数据，
<input type="button" value="异步加载数据" /><div id="box"></div>
利用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表单为例
<form>用户名：<input type="text" name="user"/>密码：<input type="password" name="pass" /><input type="button" value="提交" /><div id="box"></div></form>
3-2：后台服务器端user.php代码如下：
<?phpecho $_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');});});0 0
- Jquery——Day4（Ajax基本用法get/post/ajax/serialize等）
- JQuery ajax load(),get(),post()等
- jQuery 笔记 —— AJAX：ajax()、get()、post()
- jquery ajax post get
- jQuery $ajax $post $get
- Jquery $.ajax/$.post/$.get
- jQuery实现Ajax应用加载（load/getJSON/getScript/get/post/serialize/ajax/ajaxSetup/ajaxStart/ajaxStop)
- jQuery Ajax(load,post,get,ajax)用法与详解
- jQuery中ajax异步操作 （包括$.ajax() load() $.get() $.post()等）
- 详细解读 Jquery 的$.get(),$.post(),$.ajax(),$.getJSON()等事件用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- jQuery $.post $.ajax用法
- 什么是存储转发技术
- SSL 1636——城市交通
- 数据库外键的使用
- 花拉子模信使问题（王小波）
- leetcode 148. Sort List
- Jquery——Day4（Ajax基本用法get/post/ajax/serialize等）
- 城市交通-SSL 1636
- jQuery延迟函数 让DIV延时几秒后消失或显示
- IOS缓存管理之PINCache使用
- 网站一定要增加友情链接吗？
- 【C#基础】——初识
- 冒泡法排序
- 100. Same Tree
- leetcode112~Path Sum
