当前位置: 澳门新濠3559 > 服务器运维 > 正文

包含各配置及回调函数信息,ajax时间差导致的变

时间:2019-12-08 19:30来源:服务器运维
本文实例分析了jQueryajax时间差导致的变量赋值问题。分享给大家供大家参考,具体如下: Ajax 在jquery中ajax可以分类为$.ajax $.get $.post $.getJSON$.getScript几种了,下面我都找了一些实例分享

本文实例分析了jQuery ajax时间差导致的变量赋值问题。分享给大家供大家参考,具体如下:

Ajax

在jquery中ajax可以分类为$.ajax $.get $.post $.getJSON $.getScript几种了,下面我都找了一些实例分享给大家,估计大家看了之后觉得jquery ajax真简单。

ajax异步请求,在各种特效方面,做出了不少的贡献,有了它让用户体验更好。下面说一下曾今遇到过的一个问题,今天又遇到了,又花了我一点时间,小问题,但是特别容易忽视,并且不容易想到是什么原因产生的。废话不多说,举个例子大家就明白了。

 

什么是 AJAX?

一、准备测试文件test.php和test.html

Ajax请求
jQuery.ajax(options)

AJAX = Asynchronous JavaScript and XML.

  1. test.php

  2. test.html

    www.jb51.net//js代码放到这里

说明:通过 HTTP 请求加载远程数据。

AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

二、问题举例

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

AJAX 和 jQuery
jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。
通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中!
写的更少,做的更多
jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

function test{ //定义一个function error = false; //定义一个测试变量 $.ajax({ //ajax异步请求 type: "POST", //传值方式post url: "test.php", //异步请求的文件 data: "name="+value, //异步请求的参数 success: function{ //请求成功的回调函数 if{ error = true; //返回值为1,把error变成true } } }); alert; //打印一下error的内容,在这里你知道它会弹出什么吗? if{ $; }}test;

注意: 如果你指定了dataType选项,请确保服务器返回正确的MIME信息,(如xml返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

    $(selector).load(url,data,callback)

代码中的alert;不管msg返回什么,都只会弹出false,按javascript的执行原理,一般情况下都是顺序执行的,那为什么这个error的值没有被改变呢?原因就在于异步请求是有一个时间差的,为了验证这个时间差,在举个例子,可以让你清楚的看到,这个时间差。

$.ajax()只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。

请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。
亲自试一试
只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。
Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
jQuery AJAX 请求

三、验证ajax异步请求的时间差

1.2 中可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSON 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换?为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

请求 描述

function test{ error = false; $.ajax({ type: "POST", url: "test.php", data: "name="+value, success: function == '1'){ error = true; alert; //在这里打印一下error } } }); alert; //在这里打印一下error if{ $; }}test;

 

    $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
    $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
    $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
    $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
    $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
    $.getScript(url,callback) 加载并执行远程的 JavaScript 文件
    (url) 被加载的数据的 URL(地址)
    (data) 发送到服务器的数据的键/值对象
    (callback) 当数据被加载时,所执行的函数
    (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
    (options) 完整 AJAX 请求的所有键/值对选项

当你刷新页面后,问题就很清楚,它首先弹出的是false,然后弹出了true,二次弹出之间的时间差,就是ajax异步请求的时间差。从表面上看,这段js代码的执行顺序是这样的上--下--中,其实不是这样的,代码执行的顺序还是上--中--下。为什么会先执行下面的代码呢?那是因为ajax异步请求,需要时间,而js并没有去等待,所以在这里有一个时间差。

选项

讲了这么多我再来看看实例

四、解决方法

async(Boolean):(默认: true)所有请求均为异步请求。如要发送同步请求,设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

$.ajax实例

  1. 把实际要操作的动作放到回调函数中,逃避这个时间差

    function test{ $.ajax({ type: "POST", url: "test.php", data: "name="+value, success: function.remove;}test;

beforeSend(Function):发送请求前可修改XMLHttpRequest对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

 代码如下

前面几个例子,是为了举例,真正写代码,不会那样写,哈哈。

cache(Boolean):(默认: true) 设置为fals 将不会从浏览器缓存中加载请求信息。

复制代码

function test{ error = false; $.ajax({ type: "POST", url: "test.php", async: false, //进行同步请求,默认是true的 data: "name="+value, success: function == '1'){ error = true; alert; //弹一下error } } }); alert; //在弹一下error if{ $; }}test;

complete(Function): 请求完成后回调函数(请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
    url:'productManager_reverseUpdate',// 跳转到 action 
    data:{ 
             selRollBack : selRollBack, 
             selOperatorsCode : selOperatorsCode, 
             PROVINCECODE : PROVINCECODE, 
             pass2 : pass2 
    }, 
    type:'post', 
    cache:false, 
    dataType:'json', 
    success:function(data) { 
        if(data.msg =="true" ){ 
            // view("修改成功!"); 
            alert("修改成功!"); 
            window.location.reload(); 
        }else{ 
            view(data.msg); 
        } 
     }, 
     error : function() { 
          // view("异常!"); 
          alert("异常!"); 
     } 
});

当你刷新页面时,这里是弹出二个true,为什么会这样呢?加了async:false后,就会有一个等待的过程,也就是说ajax不执行完,不执行下面的代码。用这个方法有个问题,如果等待的时间过长,用户体验很不好的。

contentType(String): (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
    var formParam = $("#form1").serialize();//序列化表格内容为字符串 
    $.ajax({ 
        type:'post',     
        url:'Notice_noTipsNotice', 
        data:formParam, 
        cache:false, 
        dataType:'json', 
        success:function(data){ 
        } 
    }); 

更多关于jQuery ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》

data(Object,String): 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
     type:'post', 
     url:'validatePwd2_checkPwd2?password2='+password2, 
     data:{}, 
     cache:false, 
     dataType:'json', 
     success:function(data){ 
          if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
          { 
               textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
               $("#validatePassword2").val("pwd2Error"); 
               checkPassword2 = false; 
               return; 
           } 
      }, 
      error:function(){} 
});

希望本文所述对大家jQuery程序设计有所帮助。

dataType(String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

//4.$.ajax拼接data的异步请求
$.ajax({  
    url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',  
    type:'post',  
    data:'merName='+values,  
    async : false, //默认为true 异步  
    error:function(){  
       alert('error');  
    },  
    success:function(data){  
       $("#"+divs).html(data);  
    }
});

"xml": 返回 XML 文档,可用 jQuery 处理。

 

"html": 返回纯文本 HTML 信息;包含 script 元素。

jquery.get实例

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )

"json": 返回 JSON 数据 。

returns: xmlhttprequest

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

url 字符串,其中包含的url的请求被发送。

error(Function) : (默认:自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

data 地图或字符串发送到与请求的服务器。

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的Ajax事件。

callback(data, textstatus, xmlhttprequest),如果请求成功执行。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

datatypethe 类型的数据预计从服务器。

processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

这是一个缩写的ajax功能,这相当于:

success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。

 代码如下

timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

复制代码

type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

$.ajax({
  url: url,
  data: data,
  success: success,
  datatype: datatype
});

url (String) : (默认: 当前页地址) 发送请求的地址。

 

 

调函数成功返回的数据传递,这将是一个xml根元素,文本字符串,网页特效文件,或根据响应的mime类型的json对象。它也通过了响应文本状态。

加载并执行一个 JS 文件。

在jquery 1.4,成功回调函数也是通过xmlhttprequest对象。

$.ajax({

大多数实现将指定一个成功的处理程序:

 type: "GET",

 代码如下

 url: "test.js",

复制代码

 dataType: "script"

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('load was performed.');
});

});

jQuery.post实例

 

jQuery.post( url, [data], [callback], [type] ) :
使用POST方式来进行异步请求

保存数据到服务器,成功时显示信息。

参数:

$.ajax({

url (String) : 发送请求的URL地址.

   type: "POST",

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

   url: "some.php",

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

   data: "name=John&location=Boston",

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
1.html页面(index.html)

   success: function(msg){

 代码如下

     alert( "Data Saved: " + msg );

复制代码

   }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src='#'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){
 
  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}

});

function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
  function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },
  "text");//这里返回的类型有:json,html,xml,text
}
</script>
</head>

 

<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>
   
    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>   
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>
</body>
</html>

装入一个 HTML 网页最新版本。

2.php页面(action.php)

$.ajax({

 代码如下

 url: "test.html",

复制代码

 cache: false,

<?php
$email = $_POST["email"];
$address = $_POST["address"];

 success: function(html){

//echo $email;
//echo $address;
echo "success";
?>

    $("#results").append(html);

jquery.getjson实例

 }

jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一个字符串,其中包含的url,该请求被发送。

});

data 地图或字符串,发送到与请求的服务器

 

callback(data, textstatus) 回调函数是执行,如果请求成功。

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

看一个简单的实例

 var html = $.ajax({

 代码如下

 url: "some.php",

复制代码

 async: false

$.ajax({
  url: url,
  datatype: 'json',
  data: data,
  success: callback
});

 }).responseText;

回调是通过返回的数据,这将是一个网页特效对象或数组的定义和解析json结构使用$。parsejson()方法。

 

大多数实现将指定一个成功的处理程序:

发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。

 代码如下

 var xmlDocument = [create xml document];

复制代码

 $.ajax({

$.getjson('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

   url: "page.php",

这个例子,当然,依赖于json文件结构:

   processData: false,

{
  "foo": "the quick brown fox jumps教程 over the lazy dog.",
  "bar": "abcdefg",
  "baz": [52, 97]
}

   data: xmlDocument,

 代码如下

   success: handleResponse

复制代码

 });

<!doctype html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src=";
</head>
<body>
  <div id="images">

 

</div>
<script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendto("#images");
            if ( i == 3 ) return false;
          });
        });</script>

load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中,默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

</body>
</html>>

url (String) : 请求的HTML页的URL地址。

jquery $.getScript实例

data (Map) : (可选参数) 发送至服务器的 key/value 数据。如果有[data]参数,就会自动转换为POST方式。

 该函数是简写的 Ajax 函数,等价于:

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

 代码如下

 

复制代码

示例代码:

$.ajax({
  url: url,
澳门新濠3559,  dataType: "script",
  success: success
});

$(".ajax.load").load("",

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用,因为那时脚本已经运行了。

         function (responseText, textStatus, XMLHttpRequest){

载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。

         this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]

比如加载一个 test.js 文件,里边包含下面这段代码:

         //alert(responseText);//请求返回的内容

 代码如下

         //alert(textStatus);//请求状态:success,error

复制代码

         //alert(XMLHttpRequest);//XMLHttpRequest对象

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

});

通过引用该文件名,就可以载入并运行这段脚本:

注:不知道为什么URL写绝对路径在FF下会出错。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。

 代码如下

 

复制代码

<b>jQuery Links:</b><ul id="links"></ul>

$.getScript("ajax/test.js", function() {
  alert("Load was performed.");
});

代码:$("#links").load("/Main_Page #p-Getting-Started li");

$.get $.post $.getJSON $.getScript几种了,下面我都找了一些实例分享给大家,估计大家看了之后觉得jquery ajax真简单。...

 

代码:加载 feeds.html 文件内容。

$("#feeds").load("feeds.html");

 

代码:以 POST 形式发送附加参数并在成功时显示信息。

 $("#feeds").load("feeds.php", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

 });

 

jQuery.get(url,[data],[callback]):通过远程 HTTP GET 请求载入信息

示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

         //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

         this; // 在这里this指向的是Ajax请求的选项配置信息

         alert(data);

         //alert(textStatus);//请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数

         //alert(this);

});

 

请求 test.php 网页,忽略返回值。 $.get("test.php");

$.get("test.php", { name: "John", time: "2pm" } );

 

显示 test.php 返回值(HTML 或 XML,取决于返回值)。

$.get("test.php", function(data){

 alert("Data Loaded: " + data);

});

 

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" },

 function(data){

    alert("Data Loaded: " + data);

 });

 

jQuery.getJSON(url,data,callback):通过 HTTP GET 请求载入 JSON 数据

从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

<div id="images"></div>

代码:

$.getJSON("",

function(data){

 $.each(data.items, function(i,item){

    $("<img/>").attr("src",

item.media.m).appendTo("#images");

    if ( i == 3 ) return false;

 });

});

 

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", function(json){

 alert("JSON Data: " + json.users[3].name);

});

 

从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){

 alert("JSON Data: " + json.users[3].name);

});

 

jQuery.getScript(url,callback):通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

载入 jQuery 官方颜色动画插件 成功后绑定颜色变化动画。

<button id="go">» Run</button>

<div class="block"></div>

代码:

jQuery.getScript("",

function(){

 $("#go").click(function(){

    $(".block").animate( { backgroundColor: 'pink' }, 1000)

      .animate( { backgroundColor: 'blue' }, 1000);

 });

});

 

加载并执行 test.js。 $.getScript("test.js");

 

加载并执行 test.js ,成功后显示信息。

$.getScript("test.js", function(){

 alert("Script loaded and executed.");

});

 

jQuery.post(url,data,callback,type):通过远程 HTTP POST 请求载入信息

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

 

示例代码:

Ajax.aspx:

Response.ContentType = "application/json";

Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

 

代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },

         function (data, textStatus){

              // data 可以是 xmlDoc, jsonObj, html, text, 等等.

              //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this

              alert(data.result);

         }, "json");

 

Ajax事件
ajaxComplete(callback):
AJAX 请求完成时执行函数。

$("#msg").ajaxComplete(function(request, settings){

   $(this).append("<li>Request Complete.</li>");

 });

 

ajaxError(callback):AJAX 请求发生错误时执行函数

 $("#msg").ajaxError(function(request, settings){

   $(this).append("<li>Error requesting page " + settings.url +

"</li>");

 });

 

ajaxSend(callback):AJAX 请求发送前执行函数

 $("#msg").ajaxSend(function(evt, request, settings){

   $(this).append("<li>Starting request at " + settings.url +

"</li>");

 });

 

ajaxStart(callback):AJAX 请求开始时执行函数

 $("#loading").ajaxStart(function(){

   $(this).show();

 });

 

ajaxStop(callback):AJAX 请求结束时执行函数

 $("#loading").ajaxStop(function(){

   $(this).hide();

 });

 

ajaxSuccess(callback):AJAX 请求成功时执行函数

 $("#msg").ajaxSuccess(function(evt, request, settings){

   $(this).append("<li>Successful Request!</li>");

 });

 

其它
jQuery.ajaxSetup(options):
设置全局 AJAX 默认选项

$.ajaxSetup({

 url: "/xmlhttp/",

 global: false,

 type: "POST"

});

$.ajax({ data: myData });

 

serialize():序列表表格内容为字符串。

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

 

serializeArray():序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据

var fields = $("select, :radio").serializeArray();

jQuery.each( fields, function(i, field){

 $("#results").append(field.value

  • " ");

});

 

编辑:服务器运维 本文来源:包含各配置及回调函数信息,ajax时间差导致的变

关键词: