分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jQuery AJAX基础

发布时间:2023-09-06 01:24责任编辑:傅花花关键词:jQuery

一、JSON

    定义:

            JSON(JavaScript Object Notation, JS对象标记)是一种轻量级的数据交换格式。    
    它基于 ECMAScript(w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
    简洁和清晰的层次结构使得JSON称为理想的数据交换语言。易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
 
    json类型:
                数字类型,字符串类型,布尔类型,数组类型,对象类型,null
 

    JS中的JSON用法

    stringfy和parse方法

JSON.parse(); ???//用于将一个JSON字符串转换为JavaScript对象JSON.stringfy(); ???//用于将JavaScript值转换为JSON字符串

    和XML的比较

JSON格式与2001年由Douglas Crockford提出,目的就是取代繁琐笨重的XML格式。
符合JavaScript原声语法,可以又解释器引擎直接处理,不用另外添加解释代码。所以,JSON迅速被接收,已经成为各大网站交换数据个标准格式,并被写入ECMAScript5,成为标准的一部分。
 
XML和JSON都使用结构化方法来标记数据。
用XML表示中国部分省市数据如下:
 1 <?xml version="1.0" encoding="utf-8"?> 2 <country> 3 ????<name>中国</name> 4 ????<province> 5 ????????<name>黑龙江</name> 6 ????????<cities> 7 ????????????<city>哈尔滨</city> 8 ????????????<city>大庆</city> 9 ????????</cities>10 ????</province>11 ????<province>12 ????????<name>广东</name>13 ????????<cities>14 ????????????<city>广州</city>15 ????????????<city>深圳</city>16 ????????????<city>珠海</city>17 ????????</cities>18 ????</province>19 ????<province>20 ????????<name>台湾</name>21 ????????<cities>22 ????????????<city>台北</city>23 ????????????<city>高雄</city>24 ????????</cities>25 ????</province>26 ????<province>27 ????????<name>新疆</name>28 ????????<cities>29 ????????????<city>乌鲁木齐</city>30 ????????</cities>31 ????</province>32 </country>
View Code
用JSON表示如下:
 1 { 2 ????"name": "中国", 3 ????"province": [{ 4 ????????"name": "黑龙江", 5 ????????"cities": { 6 ????????????"city": ["哈尔滨", "大庆"] 7 ????????} 8 ????}, { 9 ????????"name": "广东",10 ????????"cities": {11 ????????????"city": ["广州", "深圳", "珠海"]12 ????????}13 ????}, {14 ????????"name": "台湾",15 ????????"cities": {16 ????????????"city": ["台北", "高雄"]17 ????????}18 ????}, {19 ????????"name": "新疆",20 ????????"cities": {21 ????????????"city": ["乌鲁木齐"]22 ????????}23 ????}]24 }
View Code
    可以看到,JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读,并且在数据交换方面,由于JSON所使用的字符要比XML少得多,可以大大节约传输数据所占用的带宽。
 

二、Ajax简介

    AJAX(Asynchronous Javascript And XML),异步Javascript和XML。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)
  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
AJAX出了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
 
JS实现的局部刷新:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ? 7 ????<style> 8 ????????.error{ 9 ????????????color:red10 ????????}11 ????</style>12 </head>13 <body>14 ?15 ?16 <form class="Form">17 ?18 ????<p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>19 ????<p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>20 ????<p><input type="submit" value="submit"></p>21 ?22 </form>23 ?24 <script src="jquery-3.1.1.js"></script>25 ?26 <script>27 ????$(".Form :submit").click(function(){28 ????????flag = true;29 ????????$("Form .v1").each(function(){30 ????????????var value = $(this).val();31 ????????????if(value.tirm().length==0{32 ???????????????????var mark = $(this).attr("mark");33 ???????????????????var $span = $("<span>");34 ???????????????????$span.html(mark+"不能为空!");35 ???????????????????$span.prpo("class", "error");36 ????????????????????$(this).after($span);37 ????????????38 ????????????????????setTimeout(function(){39 ????????????????????????$span.remove();40 ????????????????????}, 800);41 ????????????????????flag = false;42 ????????????????????return flag;43 ???????????????}44 ????????});45 ????????return falg46 ????});47 ????</script>48 ????</body>49 </html>

    AJAX的优势

  • AJAX使用Javascript技术向服务器发送异步请求
  • AJAX无需刷新整个页面
  • 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高
 

    jQuery实现的ajax

 
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 ? 9 <button class="send_Ajax">send_Ajax</button>10 ?11 <script>12 ????// $.ajax的两种使用方式:13 ????// 1 $.ajax(settings);14 ????// 2 $.ajax(url, [settings]);15 ????16 ????$(".send_Ajax").click(function(){17 ????????$.ajax({18 ????????????url: "/handle_Ajax/",19 ????????????type: "POST",20 ????????????data: {username:"Lucy", password: 123},21 ????????????22 ????????????success:function(data){23 ????????????????alert(data)24 ????????????},25 ????????????// error26 ????????????error:function(jqXHR, textStatus, err){27 ????????????????//jqXHR: jQuery增强的xhr28 ????????????????//textStatus: 请求完成状态29 ????????????????//err:底层通过throw抛出的异常对象,值与错误类型有关30 ????????????????console.log(arguments);31 ????????????},32 ????????????// complete33 ????????????complete:function(jqXHR, textStatus){34 ????????????????//jqXHR: jQuery增强的xhr35 ????????????????//textStatus: 请求完成状态 success | error36 ????????????},37 ????????????statusCode:{38 ????????????????‘403‘:function(jqXHR, textStatus,err){39 ????????????????????console.log(arguments);40 ????????????????},41 ????????????????"400":function(){}42 ????????????},43 ????????})44 ????}45 ????</script>46 ????</body>47 </html>
View Code
 

    $.ajax参数

请求参数
************ data ************data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。function testData(){ ???$.ajax("/test/",{ ???????data:{ ???????// 此时的data是一个json形式的对象 ???????????a:1, ???????????b:2 ???}}); ?//?a=1&b=2?************ processData ************processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;如果为false;那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString(),最后得到一个[object, object]形式的结果。?************ contentType ************contentType: 默认值:“application/x-www-form-urlencoded".发送信息至服务器时内容编码类型。 ???????????用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,比如contentType:“application/json",即向服务器发送一个json字符串。 ???????????比如contentType:"application/sjon",即向服务器发送一个json字符串: ???????????$.ajax("‘ajax_get",{ ???????????data: JSON.stringfy({ ???????????????a:22, ???????????????b:33 ???????????????}), ???????????????contentType:"application/json", ???????????????type:"POST", ???????????}); ???????????注意:contentType:“appliation/json"一旦设定,data必须是json字符串,不能是json对象************ traditional ************traditional: 一般是我们的data数据又数组时会用到: data:{a:22, b:33, c:["x", "y"]}, ???????????????traditional为false会对数据进行深层次迭代。

响应参数

1 /* 2 dataType: 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;比如我们的服务器响应的content Type为json格式,这时ajax方法就会对响应的内容进行一个json格式的转换,如果转换成功,我们在success的回调函数里就会得到一个json格式的对象,转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用data type。3 dataType的可用值:html|xml|json|text|script4 */
 
 
 
 
 
 
 

jQuery AJAX基础

原文地址:http://www.cnblogs.com/eric_yi/p/7831483.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved