AJax技术

jquery学习(六)ajax

字号+ 作者:H5之家 来源:H5之家 2017-02-07 17:04 我要评论( )

1.什么是ajax简短地说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示,也就是异步加载。2.load方法load()方法从服务器加载数据,并把返

1.什么是ajax

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示,也就是异步加载。

2.load方法

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:

$(selector).load(URL,data,callback); url:必需参数,请求的url data:可选参数,发送至服务器的 key/value 数据。 callback:可选参数,请求完成时(不需要是success的)的回调函数。

例如:
可以将h3中的内容换成test文件中的内容

$("h3").load("../../doc/test");

也可以将test文件中的p元素加载到h3中

$("h3").load("../../doc/test p");

回调函数可以设置不同的参数:

responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 3.get方法

通过远程 HTTP GET 请求载入信息。

语法:

$(selector).get(url,data,success(response,status,xhr),dataType)

success:可选。规定当请求成功时运行的函数。
额外的参数:

response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

dataType:可选,规定预计的服务器响应的数据类型。
默认地,jQuery 将智能判断。
可能的类型:”xml”,”html”,”text”,”script”,”json”,”jsonp”

4.post方法

通过 HTTP POST 请求从服务器载入数据
语法:

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) 5.getScript方法

通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法:

jQuery.getScript(url,success(response,status)) 6.ajax方法

通过 HTTP 请求加载远程数据。
语法:

jQuery.ajax([settings])

settings:可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

常见的请求参数:

url:请求的url。 data:发送到服务器的数据。 type:请求方式。 dataType:预期服务器返回的数据类型。 success:请求成功后的回调函数。 error:请求失败时调用此函数。 complete:请求完成后回调函数 (请求成功或失败之后均调用)。 beforeSend:发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 cache:类型为Boolean,默认为true,dataType为 script 和 jsonp 时默认为false,设置为false将不缓存此页面。

实例:

$.ajax({ // the URL for the request url: "post.php", // the data to send (will be converted to a query string) data: { id: 123 }, // whether this is a POST or GET request type: "GET", // the type of data we expect back dataType : "json", // code to run if the request succeeds; // the response is passed to the function success: function( json ) { $( "<h1/>" ).text( json.title ).appendTo( "body" ); $( "<div class=\"content\"/>").html( json.html ).appendTo( "body" ); }, // code to run if the request fails; the raw request and // status codes are passed to the function error: function( xhr, status, errorThrown ) { alert( "Sorry, there was a problem!" ); console.log( "Error: " + errorThrown ); console.log( "Status: " + status ); console.dir( xhr ); }, // code to run regardless of success or failure complete: function( xhr, status ) { alert( "The request is complete!" ); }, beforeSend: function() { }, cache: true //false });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • asp.net实现无刷新ajax技术登录界面

    asp.net实现无刷新ajax技术登录界面

    2017-02-08 10:04

  • AJAX学习心得(二)

    AJAX学习心得(二)

    2017-02-07 17:03

  • 有替代 Ajax 的新技术吗?

    有替代 Ajax 的新技术吗?

    2017-02-07 16:00

  • ajax推技术,在线服务器端向客户端发送数据

    ajax推技术,在线服务器端向客户端发送数据

    2017-02-07 15:00

网友点评