分享web开发知识

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

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

ajax与jquery

发布时间:2023-09-06 02:32责任编辑:顾先生关键词:暂无标签

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

ajax与jquery

原文地址:https://www.cnblogs.com/CllOVER/p/10351687.html

知识推荐

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