js ajax(ajax async)
今天给各位分享js ajax的知识,其中也会对ajax async进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
ajax和javascript的区别
这两不是同一类东西
1, javascript是一种程序开发语言,主要用于web页面程序开发
2,ajax是异步数据请求,是为了解决网页请求没有返回的时候,页面是不能做其他操作的,例如网速慢的时候,页面就会一直在等待,页面什么也没有,也不能做其他操作,当页面数据很大的时候,要等到数据全部加载好,才会显示,这是同步的技术,这样会有很不好的用户体验,然后就出现了ajax,核心是javascript的一个对象,ajax的http请求不是同步的,在请求的时候,页面不用停滞等待,可以做其他操作,显示的时候可以,加载好的先显示,加载慢的后显示
jQuery.ajax()的参数
options(可选)ObjectAJAX请求设置。所有选项都是可选的。 asyncBoolean
(默认: true)默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)Function
发送请求前可修改 XMLHttpRequest对象的函数,如添加自定义 HTTP头。XMLHttpRequest对象是唯一的参数。这是一个 Ajax事件。如果返回false可以取消本次ajax请求。
function(XMLHttpRequest){ this;//调用本次AJAX请求时传递的options参数}cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2新功能,设置为 false将不缓存此页面。
complete(XHR, TS)Function
请求完成后回调函数(请求成功或失败之后均调用)。参数: XMLHttpRequest对象和一个描述成功请求类型的字符串。 Ajax事件。
function(XMLHttpRequest, textStatus){ this;//调用本次AJAX请求时传递的options参数}contentTypeString(默认: application/x-www-form-urlencoded)发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给$.ajax()那么他必定会发送给服务器(即使没有数据要发送)
contextObject
这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:
$.ajax({ url: test.html, context: document.body, success: function(){$(this).addClass(done);}});
dataObject,String
发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在 URL后。查看 processData选项说明以禁止此自动转换。必须为 Key/Value格式。如果为数组,jQuery将自动为不同值对应同一个名称。如{foo:[bar1, bar2]}转换为'&foo=bar1&foo=bar2'。
dataFilterFunction
给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){//对Ajax返回的原始数据进行预处理 return data//返回处理后的数据}dataTypeString预期服务器返回的数据类型。如果不指定,jQuery将自动根据 HTTP包 MIME信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
xml:返回 XML文档,可用 jQuery处理。
html:返回纯文本 HTML信息;包含的script标签会在插入dom时执行。
script:返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了cache参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
json:返回 JSON数据。
jsonp: JSONP格式。使用 JSONP形式调用函数时,如 myurl?callback=? jQuery将自动替换?为正确的函数名,以执行回调函数。
text:返回纯文本字符串
errorFunction
(默认:自动判断(xml或 html))请求失败时调用此函数。有以下三个参数:XMLHttpRequest对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是timeout, error, notmodified和 parsererror。Ajax事件。
function(XMLHttpRequest, textStatus, errorThrown){//通常 textStatus和 errorThrown之中//只有一个会包含信息 this;//调用本次AJAX请求时传递的options参数}globalBoolean(默认: true)是否触发全局 AJAX事件。设置为 false将不会触发全局 AJAX事件,如 ajaxStart或 ajaxStop可用于控制不同的 Ajax事件。
ifModifiedBoolean
(默认: false)仅在服务器数据改变时获取新数据。使用 HTTP包 Last-Modified头信息判断。在jQuery 1.4中,他也会检查服务器指定的'etag'来确定数据没有被修改过。
jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种GET或POST请求中URL参数里的callback部分,比如{jsonp:'onJsonPLoad'}会导致将onJsonPLoad=?传给服务器。
jsonpCallbackString为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。
passwordString
用于响应HTTP访问认证请求的密码
processDataBoolean
(默认: true)默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM树信息或其它不希望转换的信息,请设置为 false。
scriptCharsetString
只有当请求时dataType为jsonp或script,并且type是GET才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
successFunction
请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。 Ajax事件。
function(data, textStatus){// data可能是 xmlDoc, jsonObj, html, text,等等... this;//调用本次AJAX请求时传递的options参数}
traditionalBoolean
如果你想要用传统的方式来序列化数据,那么就设置为true。请参考工具分类下面的jQuery.param方法。
timeoutNumber
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
typeString
(默认: GET)请求方式(POST或 GET),默认为 GET。注意:其它 HTTP请求方法,如 PUT和 DELETE也可以使用,但仅部分浏览器支持。
urlString
(默认:当前页地址)发送请求的地址。
usernameString
用于响应HTTP访问认证请求的用户名
xhrFunction
需要返回一个XMLHttpRequest对象。默认在IE下是ActiveXObject而其他情况下是XMLHttpRequest。用于重写或者提供一个增强的XMLHttpRequest对象。这个参数在jQuery 1.3以前不可用。描述:加载并执行一个 JS文件。
jQuery代码:$.ajax({ type: GET, url: test.js, dataType: script});
描述:
保存数据到服务器,成功时显示信息。
jQuery代码:$.ajax({ type: POST, url: some.php, data: name=John&location=Boston, success: function(msg){ alert( Data Saved:+ msg);}});
描述:
装入一个 HTML网页最新版本。
jQuery代码:$.ajax({ url: test.html, cache: false, success: function(html){$(#results).append(html);}});
描述:
同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
jQuery代码: var html=$.ajax({ url: some.php, async: false}).responseText;
描述:
发送 XML数据至服务器。设置 processData选项为 false,防止自动转换数据格式。
jQuery代码:
var xmlDocument= [create xml document];$.ajax({ url: page.php, processData: false, data: xmlDocument, success: handleResponse});
jQuery post实例代码:
$.post(test.php,{name:name,pwd:pwd},function(msg){
alert(msg);
})
test.php里面用$_POST[name]和$_POST[pwd]接收参数.
$.post第一个参数是url,{}这里里面的是参数名称和值之间用:非开,多个值用,分开,最后一个是返回的函数msg就是返回的结果。根据自己的需要返回不用的数据。
$.get和post一样,php接收的话改成$_GET[name]和$_GET[pwd]
如何利用script标签构建跨域ajax
要解决ajax跨域问题,网上给出的方法有二:
1是构建服务器端的代理。简而言之,就是ajax中调用的实质还是本机的url,而服务器端替js去取回远端地址。
2.利用script标记,生成一个标签。在js加载完成后,再执行后续操作。
就是将原来新建xmlHTTPrequest对象的操作改成了新建script标签的操作.
这里给出一个例子:
#ajah.js
var Ajah=function(url,varname,handleSuccess,handleFailure){
/**
* handleSuccess,handleFailure must be functions
**/
script= document.createElement("script");
script.src=url;
var handler= function(str)
{
handleSuccess(str);
}
script.onload= function()
{
var json=eval(varname);
handler(json);
}
if(window.ie)
{
script.onreadystatechange= function()
{
if(script.readyState=='complete'||script.readyState=='loaded')
{
var json=eval(varname);
if(typeof json!='undefined')
{
handler(json);
}
}
}
}
document.body.appendChild(script);
}
而在网页中应这样调用:
#demo.html
<pre>
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux(vers 1 September 2005), see www.w3.org">
<title></title>
<script src="mootools.js"></script>
<script src="ajah.js"></script>
</head>
<body>
<script>
var ajah=new Ajah("data.js","json198",function(str){
console.debug("returned:");
console.debug(str);
},
function(str){});
</script>
</body>
</html>
</pre>
被调用的数据文件如下
#data.js
var json198="hello,this is json198";
funciton Ajah(url,varname,handleSuccess,handleFailure){…}
Ajah这个构造函数调用四个参数:
url:远端地址
varname:远端返回数据的变量名
handleSuccess:加载完毕后加载的函数
handleFailure:暂时没用上
关于js ajax到此分享完毕,希望能帮助到您。