Ajax:Ajax百度百科含义链接:
1.数据的传递
2.是一种无刷新加载页面的技术,更新部分网页。
缺点:可能会对于后退功能失效,无法回到上一页面的状态。
Ajax须知:JSON 和 xml
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
1.具有严谨的写法
2.键值对表示(类似map中的键值对)
{ "name": "中国", "province": [{ "name": "黑龙江", "cities": { "city": ["哈尔滨", "大庆"] } }, { "name": "广东", "cities": { "city": ["广州", "深圳", "珠海"] } }, { "name": "台湾", "cities": { "city": ["台北", "高雄"] } }, { "name": "新疆", "cities": { "city": ["乌鲁木齐"] } }] }
JSON传输优于xml传输,相同条件下 (下同xml结构)JSON传输更快更轻便
<?xml version="1.0" encoding="utf-8"?> <country> <name>中国</name> <province> <name>黑龙江</name> <cities> <city>哈尔滨</city> <city>大庆</city> </cities> </province> <province> <name>广东</name> <cities> <city>广州</city> <city>深圳</city> <city>珠海</city> </cities> </province> <province> <name>台湾</name> <cities> <city>台北</city> <city>高雄</city> </cities> </province> <province> <name>新疆</name> <cities> <city>乌鲁木齐</city> </cities> </province> </country>
Ajax 与 jquery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
Jquery使用方法与基本使用这里不详细说明。
注意:本例一以下内容都以jquery为写。
Ajax
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
优点:在变动大规模页面下 只用更新一小部分和维护数据。
缺点:用户在后退时不能够保存页面的状态,后退和收藏功能会失效。(浏览器不记录动态数据,只记录静态页面)
Ajax的无刷新
传统加载页面方法
点击后观察地址变化
不使用ajax技术加载页面会改变当前页面的url。使用了ajax加载方式如下:
点击之后观察地址变化
局部进行刷新加载页面。
使用代码如下;
jquery 的load()方法 加载页面(同上例子ajax所用代码)
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script> $(document).ready(function () { $("a").click(function () { var url = this.href; var args = {"time":new Date()} $("#div").load(url,args); //加载事件 return false; }) $("#div").css({"border":"solid red","width":"100px","height":"200px "}); }) </script> </head> <body> <a href="ajax.txt">click</a> <div id="div"></div> </body> </html>
ajax.txt
原文地址:https://www.cnblogs.com/CllOVER/p/10351687.html