ajax

最新推荐文章于 2025-06-26 11:35:44 发布

弥漫花香

最新推荐文章于 2025-06-26 11:35:44 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery学习

本文链接：https://blog.youkuaiyun.com/u012246905/article/details/50060387

JQuery学习专栏收录该内容

28 篇文章

订阅专栏

可以异步提交：多线路提交
Ajax:Asynchronous JavaScript and XML
(1)、javaScript:通过用户或其他与浏览器相关事件捕获行为
(2)、XMLHttpRequest对象：通过这个对象可以在不中断其他浏览器任务的情况下向浏览器发送请求
(3)、服务器上的文件：以XML、HTML、JSON格式保存文本数据
(4)、其他javaScript：解释来自服务器的数据，并将其呈现到页面上
一、load()
load()第一个参数url，为要加载的页面
$('input').click(function(){
$('.box').load('ajax.html .china');});
//将ajax.html页面的内容在当前页面加载显示出来，并且进行了筛选，显示class=china的内容

load()第二个参数data
向服务器提交数据有两种方式：get和post
以get方式提交：
$('input').click(function(){
  $('.box').load('ajax.php?url=lucky');
});
//php页面可以根据url判断
以post方式提交：
$('input').click(function(){
  $('.box').load('ajax.php'，{url,’lucky’});
});
第三个参数callback，回调函数可以传递3个参数：reponseText（请求返回）、textStatus（请求状态）、XMLHttpRequest(XMLHttpRequest对象)
$('input').click(function(){ $('.box').load('ajax.html',function(response,status，xhr){
   alert(status);});});
二、post/get(url，data,[,success(data,textStatus,jqXHR)]，[datatype])
更适合做动态文件的获取
第一种方式穿参数
$('.button').click(function(){
$.get("test.php？url=11111",function(
response,status,xhr){
  $('.box').html(response);
});
});
//注意：post不能以问号形式穿参数
第二种方式穿参数：字符串形式传参数
$('.button').click(function(){
$.get("test.php“，“url=11111”，function(
response,status,xhr){
  $('.box').html(response);
});
});
第三种方式穿参数：键值对形式传参数
$('.button').click(function(){
$.get("test.php“，{url：“11111”}，function(
response,status,xhr){
  $('.box').html(response);
});
});
type参数:返回内容的格式
$(function(){
$('.button').click(function(){
$.get("test.php",function(response,status,xhr){
  $('.box').html(response);
},'html');
});
数据库数据格式还有是json、xml、php，若返回的是纯文本，eg:text、tml,将其强行转化为json或html，则无法获取数据
返回类型为json：
Js文件
$('.button').click(function(){
$.get('test.json',function(response,status,xhr){

     alert(response[0].url);
});
});
Json文件：
[{"url":"iiiiiii"}]
type一般会自动指认类型，除非有特殊情况需要
$.get()与$.post()
1、 get请求是通过URL提交的，而post请求则是HTTP消息实体提交的
2、 get请求有大小限制（2kb），而post方式不受限制
3、 get方式会被缓存下来，可能有安全性问题，而post没有这个问题
4、 get方式通过$_GET[]获取，post方式通过$_post[]获取
三、$.getScript()和$.getJSON()
获取特定的格式
$('.button').click(function(){
$.getJSON('test.json',function(response,status,xhr){ alert(response[0].url);
}); });
获取js文件内容：
$('.button').click(function(){
$.getScript('test.js'); });
四、$.ajax()
$.ajax()是所有参数ajax()中最底层的，所有方法都是基于ajax（）方法的封装，这个方法只有一个参数，传递一个各个功能键值对的对象。
参数类型说明
url String 发送请求地址
type String 请求方式：post/get，默认为get
success Function 请求成功后调用的回调函数
data String或Object 发送到服务器的数据，键值对字符串或对象
datatype String 返回的数据类型，比如html，xml，json等
Eg、$('.button').click(function(){
$.ajax({
  url:"test.html",
  type:"post",
  data:{url:'iiiii'},//传递参数，选择url为iiii的内容
  success:function(response,status,xhr){
   $('.box').html(response);}});});
五、表单序列化
Html页面
<form action="">
用户名：<input type="text" name="user">
邮件：<input type="text" name="email">
<input type="button" class="button" value="提交">
</form>
Js 页面：
$('.button').click(function(){
$.ajax({
  url:"test.php",
  type:"post",
data:$('form').serialize(),//获取用户填写表单的内容
  success:function(response,status,xhr){
   $('.box').html(response);}});});

serialize()也可以应用在直接获取单选框、复选框和下拉列表框等内容上，可以获取value值
serialize()返回的是字符串类型，serializeArray()方法返回JSON数据
var json=$(this).serializeArray();
  $('#box').html(json[0].name+"="+json[0].value);});
以json数据格式返回，并显示在页面上
jQuery又提供了一个方法$.ajaxSetup(),请求默认值来初始化参数
//初始化重复的属性
$.ajaxSetup({
  type:"POST",
  url:"test.html",
  data:$('form').serialize() });
$('form input[type=button]').click(function(){
  $.ajax({
   success:function(response,status,xhr){
    $('#box').html(response);}}); });
$.param():
data:$.param({
   user:$('form input[name=user]').val(),
   email:$('form input[name=email]').val()})
//将对象解开成键值对的形式，再传递给服务器
六、加载请求
jQuery提供了两个全局事件.ajaxStart()和.ajaxStart()必须绑定在document上
当出现网络延迟时，为了更好的用户体验，有时会出现“正在加载中”等字样。下面我们来实现这个简单的功能。
$.ajax({
   type:"POST",
   url:"http:www.12312.com/index.html",
   data:$('form').serialize(),
   success:function(response,status,xhr){
    $('#box').html(response);
   }
  });
  });

$(document).ajaxStart(function(){
   $('.loading').show();
  }).ajaxStop(function(){
   $('.loading').hide();
});
//若请求事件太长，可以设置超时
$.({
timeout:500});
//若某个ajax不想触发全局事件，可以设置取消
$.ajax({
global:false});
七、错误处理
第一种error操作方法
Ajax操作时候：
error:function(xhr,errorText,errorType){}
eg、会出现警告：error：not fonund
第二种error操作方法
使用局部.error()方法即可
$.post(‘user.php’).error(function(xhr,status,info){})
第三种error操作方法：全局的方法.ajaxError()事件提示错误
$(document).ajaxError(function(event,xhr,settings,Errortype){})
//event:type、target等
//settings：url（错误的url）、type（本次提交的模式
//info:
）
八、请求全局事件
全局事件：
.ajaxSuccess(event,xhr,settings),对应一个局部方法：.success(),请求成功时执行
.ajaxComplete(),对应一个局部方法：.complete(),请求完成后注册一个回调函数
.ajaxSend(),没有对应的局部方法，只有对应属性beforeSend,请求发送之前要绑定的函数
eg、
$(document).ajaxSend(function(){
  alert("before");
}).ajaxComplete(function(){
  alert("after");
}).ajaxSuccess(function(){
  alert("success");
}).ajaxError(function(){
  alert("fail"); });
九、JSON和JSONP
$.ajax()方法只要设置dataType属性即可加载JSON文件，而在非同域下，可以使用JSONP，但也是有条件的。
$('form input[type=button]').click(function(){
  $.ajax({
   type:"POST",
   url:"test.json",
   dataType:"json",
   success:function(response,status,xhr){
    alert(response[0].url);}
   });});
JASONP：如果想跨域操作文件，我们必须使用JSONP，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
在服务器端要写上：$callback=$_GET['callback'];远程一定要加上这句话，否则访问不到，诉服务器可以来给我传递参数。
本地：
$.getJSON(‘json.php?callback=?’,function(response){
Alert(response)})
远程：
$.getJSON(‘http://www.li.cc/json.php?callback=?’,function(response){
alert(response)})
$.ajax()同样可以获取远程数据
$.ajax({
type:”post”,
url:”http://www.li.cc/jsonp.php”
datatype:”jsonp”
success:function(response,status,xhr){
alert(response);
}});
注意：远程访问时，当url后面没有带参数callback时，dataType类型必须为jsonp
十、jqXHR对象
我们知道一些局部方法：.success()、.complete()、.error()。他们不是XMLHttpRequest对象调用的，而是$.ajax()之类的全局方法返回的对象调用的，这个返回的对象就是jqXHR。
var jqXHR=$.ajax({
type:”post”,
url:”test.php”,
data:$(‘form’).serialize()
});
jqXHR.success(function(response){
alert(response);});
将这两部分分开，思路更加清楚
现在，我们用done()—success(),always()—complete(),fail()—error()
前面这几个方法将后面的几个方法代替。
jqXHR.done(function(response){
alert(response);}).done({function(response){
alert(response);
}});
//
1、可以连缀操作，可读性会提高
2、可以多次执行同一个回调函数
3、可以为多个操作指定回调函数 eg、
var jq1XHR1=$.ajax(‘test1.php’);
Jq2XHR2=$.ajax(‘test2.php’);
方法一、
jq1XHR1.done(finction(response){
alert(response);});
jq1XHR2.done(finction(response){
alert(response);});