Ajax数据请求

学习要点：

1.Ajax概述

2.load()方法

3.$.get()和$.post()

4.$.getScript()和$.getJSON()

5.$.ajax()方法

6.表单序列化

Ajax全称为：“AsynchronousJvSriptandXML”（异步ript和），它并不是的一种单技术，而是利用了系列交互式网页应相关所形成的结合体。使用ax我们可以无刷新状态更面并且实现提升户体验。

．Ajax概述

Ajax这个念由JesseJamesGarrett在2005年发明。它本身不串技术的集合，主要有：

1.JavaScript通过户或其他与浏览器事件捕获行；

2XMLHttpRequest对象中断任务情况下向服务器发送请求；

3上文XML、HTMLJSON格保存数据4解释来自（比如PHP从MySQL取将其呈现到页面上。

于包含众多特性优势足也非常显主要几点：

需插支持般默认开启即体验极佳Web程序能传递方做到按放松必整减轻带宽负担些操作转移客户端；

同版度不足(IE之前)进后退功被破坏因永远当会率页面搜索引擎够爬虫还理JS起变化内容调试工具缺乏语言集说，少怜。

步

使最键地就请求接受响及执回那么步

有什区别呢？普基都意段才下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让出假死大部分采模二load()法

jQuery量封装较便去考虑兼容性。对于封装的方式，三层底法$.ajax()这层封装了第二层有三种方法：.load().get().post()高.getScript().getJSON()参rl(须tmlrl址类型ring)da选送key/Object)callback成失败调函数，参数类型为函数Function果想让载入只//HTML

<inputtype="button"value="异步获取数据"/>

<divid="Box"></div>

//jQuery

$('input').click(function() {

$('#Box').load('test.html');

});

筛跟着择rl

$('input').click(function() {

$('#Box').load('test.html.my');

});

.php仅数据那么我们就可以使用第二个可选参数两gepost则式

$('input').click(function() {

$('#Box').load('test.PHP?url=ycku');

});

HP

<?php

if($_GET['url']=='ycku'){

echo'瓢城Web俱乐部官网';

}else{

echo'其他网站';

}

?>

式

$('input').click(function() {

$('#Box').load('test.PHP',{

url:'ycku'

});

});

HP

<?php

if($_POST['url']=='ycku'){

echo'瓢城Web俱乐部官网';

}else{

echo'其他网站';

}

?>

完毕函back第数

responseText

。

$('input').click(function() {

$('#Box').load('test.PHP',{

url:'ycku'

返ex（请XMLHttpRequest

},function(response,status,xhr) {

alert('返回的值为：'+response+'，状态为：'+status+'，状态是：'+xhr.statusText);

});

});

注status得值success否rrorXMLHttpRequest

属范畴：

xhstatusText'OK'字符串除态

符串供：

.get()和.post()

局元素缀和

.post()某途适合静，而对于需要传递参数到服务器页面的，加四数和样ype务器返回的内容格式：包括scriptsonsonp，后面三个为可选参数。

型

$('input').click(function() {

$.get('test.PHP',{

url:'ycku'

},xhr) {

if(status=='success'){

$('#Box').html(response);

});

}

}) //typ动ml

智判不

设置强照。

ml

$('input').click(function() {

$.get('test.xml',function(response,xhr) {

$('#Box').html($(response).find('root').find('url').text());

}); ml

});

件，会 把析son

$.get('test.json',xhr){

});

alert(response[0].url);

.get()一致间隐晦背的

GETOST消息小限制KB缓安问题没$_GET[]OST[]ml

$.post('test.PHP',xhr) {

$('#Box').html(response);

});

.getScript().getJSON()

组专门时希望再始把，这时课时使用击钮件

$('input').click(function() {

$.getScript('test.js');

});

似。

$('input').click(function() {

$.getJSON('test.json',xhr){

alert(response[0].url);

});

});

五.ajax()

。这个方法只有一个参数，传递一个各个功能键值对的对象。

表

.ajax用

$('input').click(function() {

$.ajax({

type:'POST',里换GET

url:'test.PHP',data:{

url:'ycku'

},

success:function(response,stutas,xhr){

$('#Box').html(response);

});

}

});

，如形式是

形六．表单序化

莫submit传输到服务器端。如果使用话每逐提交。这样工作效率就大大降低。

规交

$('forminput[type=button]').click(function() {

$.ajax({

type:'POST',url:'test.PHP',data:{

user:$('forminput[name=user]').val(),

email:$('forminput[name=email]').val()

},xhr){

alert(response);

});

}

});

.serialize()对

然容

$('forminput[type=button]').click(function() {

$.ajax({

type:'POST',

data:$('form').serialize(),

success:function(response,xhr){

alert(response);

}

});

});

但直框复拉列表框等内容。

容

$(':radio').click(function() {

$('#Box').html(decodeURIComponent($(this).serialize()));

});

方法.serializeArray()法可以直接把数据整合成键值对的。

$(':radio').click(function() {console.log($(this).serializeArray());varjson =$(this).serializeArray();

$('#Box').html(json[0].value);

});

很这个时候我们课时使用供的.ajaxSetup()初。

$('forminput[type=button]').click(function() {

$.ajaxSetup({

type:'POST',

data:$('form').serialize()

});

$.ajax({

success:function(response,51)">候.param()。

varobj={a:1,b:2,c :3};varform=$.param(obj);alert(form);

.param()稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递谨慎。