通过实例解析jQ Ajax操作相关原理


Posted in Javascript onSeptember 23, 2020

什么是AJAX

AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页面,这样页面内容就会更新了。(微博页面加载过程的例子,加载一会 下方才会出现内容,这其实就是Ajax加载的过程。)

简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1.jQuery的load()方法

jQuery load()方法是简单但强大的AJAX方法。

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

语法:

$("selector").load(url,data,callback);
必须的url参数规定记载的url地址
可选的data参数规定与请求一同发送的查询字符串键/值对的集合
可选的callback参数是load()方法完成后所执行的函数名称

1、
$('#btn').click(function(){

  //只传一个url,表示在id为#new-projects的元素里加载index.html
  $('#new-projects').load('./index.html');
})
2、
$('#btn').click(function(){
  //只传一个url,导入的index.html文件含有多个传递参数,类似于:index/html?name='张三'
  $('#new-projects').load('./index.html',{"name":'张三',"age":12});
})
3、
  //加载文件之后,会有个回调函数,表示加载成功的函数
  $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){

});
注意:load函数最好在服务器网页中应用,也就是说要在服务器上运行,本地调试需要搭建后端本地环境。

2. jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据,并对数据进行解析,显示到页面中

语法: $.getJSON(url,[data],[callback])

url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后执行的函数
 $.getJSON("./data/getJSON.json", function (data) {
    var str = "";//初始化保存内容变量
    $.each(data, function(index,ele) {
     $('ul').append("<li>"+ele.name+"</li>")

     });
    })

3.jquery的$.get()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法:$.get(URL,callback);

url参数规定你请求的路径,是必需参数,callback参数为数据请求成功后执行的函数

        $.get('./data/getJSON.json',function(data,status){
  console.log(status);  //success  200状态码 ok的意思       
})

4.jquery的post()方法

与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面#

语法:$.post(URL,data,callback);

url参数规定你请求的路径,是必需参数,可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数
 $.post('/index',{name:'张三'},function(data,status){
   console.log(status);

 })

5. jquery的$.ajax()方法

是做ajax技术经常使用的一个方法。 总结21几个经常使用的参数

参数如下:

1.url:

要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2.type:

要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

3.timeout:

要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:

要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

5.cache:

要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

6.data:

要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看

processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:

要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。

8.beforeSend:

要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }

9.complete:

要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

10.success:

要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。 (1)由服务器返回,并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }

11.error:

要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

12.contentType:

要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter:
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

14.dataFilter:

要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

15.global:

要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified:

要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

17.jsonp:

要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username:

要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

19.password:

要求为String类型的参数,用于响应HTTP访问认证请求的密码。

20.processData:

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

21.scriptCharset:

要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用

//get()方式
 $.ajax({
   url:'./data/index.txt',
   type:'get',
   dataType:'text',
   success:function(data){
    $('p').html(data);

   },
   error:function(error){
    console.log(error)
   }
//post()方式
$.ajax({
  url:'/index',
  type:'post',
  data:{name:'张三',age:12},
  success:function(data){
   $('p').html(data);
  },
  error:function(error){
   console.log(error)
}

6.一个前后分离 产生交互的例子:

后台server.py

# 通过flask框架搭建后台
from flask import Flask, request
# 创建一个服务器对象
app = Flask(__name__)

# 解决ajax请求的跨域问题
from flask_cors import CORS
CORS(app, supports_credentials=True)

# 设置处理请求的功能(路由route => 接口)

# 设置一个主页路由, 对应一个处理主页的功能方法, 返回主页信息
@app.route('/')
def home_action():
  return '<h1 style="color: red">主页</h1>'

# 为ajax登录请求配置一个处理登录的功能
@app.route('/login')
def login_action():
  # 拿到前台数据, 进一步判断处理
  # 需要: 需要账号与密码, 匹配成功与否决定返回结果
  user = request.args['user'] # 'user'是规定前台需要传入数据的key
  pwd = request.args['pwd']
  # print(user)
  if user == 'abc' and pwd == '123':
    return "登录成功"
  return "登录失败"


# 启动服务(该文件作为自启文件)
if __name__ == '__main__':
  app.run(port="8888")

前台.html

<h1>请登录</h1>
<form class="fm">
  <input id="user" type="text" name="user" placeholder="请输入用户名">
  <input id="pwd" type="password" name="pwd" placeholder="请输入密码">

  <input class="sbm" type="submit" value="提交...">
</form>
// 取消表单的默认事件
$('.fm').submit(function () { return false; })
// 表单提交完成的是ajax请求
$('.sbm').click(function () {
  // 前提: 准备发送的数据
  var user = $('#user').val();
  var pwd = $('#pwd').val();

  // 1.通过ajax发生请求, 获得后台响应的结果
  // 2.用得到的结果来局部渲染页面内容
  // 1.
  $.ajax({
    url: "http://127.0.0.1:8888/login", // 接口
    data: { // 数据
      user: user,
      pwd: pwd
    },
    success: function (data) { // 结果
      // 2.
      doSomething(data);
    }
  })
});
// 处理结果数据的功能
function doSomething(data) {
  // console.log(data)
  $('h1').text(data)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
列表内容的选择
Jun 30 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
字节飞书面试promise.all实现示例
Jun 16 Javascript
js实现三角形粒子运动
Sep 22 #Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 #Javascript
Vue实现开关按钮拖拽效果
Sep 22 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php查询内存信息操作示例
2019/05/09 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
班长自荐书范文
2014/02/11 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
转让协议书范本
2014/04/15 职场文书
创先争优标语
2014/06/27 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang