ajax同步请求,ajax异步传输,ajax异步请求详解

ajax同步请求,ajax异步传输,ajax异步请求详解

做前端开发的朋友一定对ajax异步更新印象深刻。本文主要介绍了ajax异步请求的一些内容,具有一定的参考价值。让我们和边肖一起来看看吧。

做前端开发的朋友一定对ajax异步更新印象深刻。作为一个入坑新人,今天和大家聊聊ajax异步请求。既然是ajax,jQuery的知识是必不可少的。建议你去www.w3school.com学习。教程很完善,适合新手快速入门。

jQuery的引用可以通过下载js文件导入,也可以外部导入。

script src= http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js type= text/JavaScript /script

导入jQuery后,我们就可以开始ajax异步更新请求数据了。

1.使用load()方法请求通过Ajax加载服务器中的数据,并将返回的数据放入指定的元素中。它的调用格式是:load(url,[data],[callback])参数url是加载服务器的地址,可选的data参数是请求时发送的数据,callback参数是数据请求成功后执行的回调函数。

$(function(){

$(#btn )。单击(函数(){

$(ul )。html( img src= Images/loading . gif alt= /)。load(www.manyiaby.com ,function(){

});

});

});

2.使用getJSON()方法,可以通过Ajax异步请求获取服务器中的数据,解析获取的数据并显示在页面上。它的调用格式是jquery.getjson (URL,[data],[callback])或者$。getjson (URL,[data],[callback])其中,URL参数是请求加载json格式文件的服务器的地址,可选data参数是请求时发送的数据,callback参数是数据请求成功后执行的回调函数。

$(function(){

$(#btn )。单击(函数(){

$.getJson(www.manyiaby.com ,function(data){

$.每个(数据,功能(索引,运动){

if(index==3)

alert(sport[ name ]);

})

});

});

});

3.使用getScript()方法在服务器中异步请求和执行JavaScript格式文件。它的调用格式如下:jQuery.getScript (url,[callback])或$。getScript(url,[callback])参数url是服务器请求地址,可选的callback参数是请求成功后执行的回调函数。

$(function(){

$(#btn )。单击(函数(){

$.getScript(www.manyiaby.com ,function(){

警报(“操作完成”);

});

});

});

4.使用get()方法时,GET从服务器请求数据,请求的数据由方法中回调函数的参数返回。其调用格式如下:$。get(url,[callback])参数url是服务器的请求地址,可选的callback参数是请求成功后执行的回调函数。

$(function(){

$(#btn )。单击(函数(){

$.get(www.manyiaby.com ,函数(数据){

alert(data . name);

}、 JSON );

});

});

5.与get()方法相比,post()方法多用于通过POST向服务器发送数据。服务器收到数据后,会对其进行处理,并将处理结果返回给页面。调用格式如下:$。post(url,[数据],[回调])参数url是服务器的请求地址,可选数据是请求服务器时发送的数据,可选回调参数是请求成功后执行的回调。

$(function(){

$(#btn )。单击(函数(){

$.post (www.manyiaby.com ,{name: Manyi.com ,URL: www.manyiaby.com},function (data) {

警报(数据);

});

});

});

6.使用serialize()方法,可以用表单中的name属性序列化元素值,并生成标准的URL编码的文本字符串,该字符串可以直接用于ajax请求。它的调用格式如下:$(选择器)。serialize(),其中选择器参数是一个或多个表单中的元素或表单元素本身。

$(function(){

$(#btn )。单击(函数(){

alert($(form )。serialize());

});

});

7.使用ajax()方法是请求服务器数据的最低级也是最强大的方法。它不仅可以获取服务器返回的数据,还可以向服务器发送请求并传递数值。其调用格式如下:jQuery.ajax([settings])或$。ajax([settings])其中参数设置是发送ajax请求时的配置对象,在这个对象中,url代表服务器请求的路径,data是请求过程中传递的数据,dataType是服务器返回的数据类型,success是请求成功执行的回调函数,Type是发送数据请求的方式。默认值是get。

$(function(){

$(#btn )。单击(函数(){

$.ajax({

网址: www . many aby . com ,

数据类型:“文本”,

数据:{name: Manyi.com ,url:wwww.manyiaby.com},

成功:函数(数据){

警报(数据);

}

});

});

});

8.可以使用ajaxSetup()方法设置Ajax请求的一些全局选项值。设置之后,下面的Ajax请求将不需要添加这些选项值。它的调用格式是jQuery.ajaxSetup([options])或$。Ajax setup([选项])。option参数是一个对象,通过它可以设置Ajax请求的全局选项值。

$(function () {

$.ajaxSetup({

数据类型:“文本”,

成功:函数(数据){

警报(数据);

}

});

$(#btn )。bind(click ,function () {

$.ajax({

数据:{name: Manyi.com ,url: www.manyiaby.com},

网址:“www . many aby . com”

});

})

});

});

9.ajaxStart()和ajaxStop()方法绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式是:$(选择器)。ajaxStart(function())和$(选择器)。ajaxStop(function()),其中两个方法中的括号都是绑定函数。AjaxStart()方法绑定的函数在发送AJAX请求前执行,ajaxStop()方法绑定的函数在请求成功后执行。

$(function () {

$.ajaxStart(function (){

警报(请求数据.);

});

$.ajaxStop(function (){

警报(“数据请求已完成!”);

});

$(#btn )。bind(click ,function () {

$.ajax({

网址: www . many aby . com ,

数据类型: json ,

成功:函数(数据){

Alert (name: data.name )。

}

});

})

});

10.定义一个json对象,用来保存学生的相关资料。通过美元。each()工具函数,获取数组中每个元素的名称和内容并显示在页面上。

!文档类型html

超文本标记语言

meta http-equiv= Content-Type Content= text/html;charset=utf-8 /

script src= http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js type= text/JavaScript /script

练习/标题

/头

身体

按钮/按钮

脚本类型=文本/javascript

$(function () {

$(button )。bind(click ,function () {

Var jsonDate=[{name: Manyi.com ,URL: www . manyi aby . com }];

$.each(jsonDate,function(index,data){

alert(data . name);

});

})

});

/脚本

/body

/html

这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助,同时也希望你能多多支持我们!

ajax同步请求,ajax异步传输,ajax异步请求详解