JavaScript学习笔记(五)——Ajax
时间:2022-07-22
本文章向大家介绍JavaScript学习笔记(五)——Ajax,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery与Ajax的综合应用
Ajax是 Asynchronous JavaScript And XML 的缩写,意思是异步的JavaScript和xml,他是基于JavaScript和HTTP请求的一种网页编程模式,其核心就是一个JavaScript对象和相关函数。
以一种异步的方式与web服务器通信,并且只更新页面的一部分。
Ajax由四部分组成:
- JavaScript
- DOM
- CSS
- XMLHTTPRequest:负责将客户端信息以异步通信的方式发送到服务器端,并接收服务器端返回的响应信息和数据。
GET和POST模式:
- GET方式一般用来传送简单数据,大小限制在1kb以下,请求的数据被转化成查询字符串并追加到请求的URL之后发送;
- POST可以达到2MB,他是将数据存放在
send
方法中发送,在数据发送之前必须先设置HTTP请求的头部。
1. 加载异步数据
- 全局函数getJSON()
- 全局函数getScript()
- 可以通过getScript动态载入脚本,即在网页初始化时只要载入必要文件,其他的用的时候再载入。
-
$(selector).getScript("./jquery.min.js")
;
2. 请求服务器数据
- $.get()
jQuery.get(url [,data] [,callback] [,type]);
- url为必选参数,指定了URL的地址
- data为可选参数,指定了要发送给服务器端的数据
- callback也是可选参数,回调函数
- type可选参数,指定了返回内容的形式,默认为HTML形式
- $.post()
jQuery.post(url [,data] [,callback] [,type]);
参数同get
- serialize()序列化表单
在jQuery中,可以使用
serialize
函数将表单数据序列化为键值对,创建url编码文本字符串进行提交。
3. Ajax中的全局事件
ajax的全局事件会在调用其他事件的时候默认触发:
- ajaxStart()
- ajaxSend()
- ajaxSuccess()
- ajaxComplete()
- ajaxStop()
- ajaxError()
jQuery插件的应用于开发
jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。
好用的jQuery插件:
1. jQuery Form插件
jQuery Form是一个优秀的表单插件,它可以非常容易地使HTML表单支持Ajax。jQuery Form插件有两个核心方法:
-
ajaxForm()
适用于以提交表单的方式处理数据,需要在表单中标明表单的action、id、method属性,最好在表单中提供submit按钮。此方法大大简化了使用ajax提交表单时的数据传递问题,不需要逐个地以JavaScript的方式获取每个表单属性的值。 -
ajaxSubmit()
适用于以事件机制提交表单,如通过超链接、图片的click事件等提交表单。使用时只需要指定表单的action
属性即可,不需要提供submit按钮。
2. jQuery UI插件
jQueryUI 插件是一个基于 jQuery 的用户界面开发,该库提供了UI控件。
- 鼠标拖拽页面板块
只需要分别在拖拽源和目标上调用
draggable()
函数即可。 - 实现拖入购物车功能 droppable()方法实现接收容器。
<script language="javascript">
$(function () {
$(".draggable").draggable({
helper: "clone"
});
$("#droppable-accept").droppable({
accept: function (draggable) {
return $(draggable).hasClass("green");
},
drop: function () {
$(this).append($("<div></div>").html("接收一次!"));
}
});
});
</script>
3. clueTip插件
是一个工具提示插件,可以方便的为链接或其他元素添加 Tooltip 功能。
- Terminal &zsh &oh-my-zsh配置
- 【Python量化投资】基于网格优化、遗传算法对CTA策略进行参数优化
- 将我的 Windows Phone 应用程序更新到 Windows Phone 8
- 绑定子类的泛型基类,反模式?
- 给创业码农的话--如何提升开发效率
- 基于OEA框架的客户化设计(二) 元数据设计
- 自定义actionbar
- (转)JS算法系列-数组去重
- 基于OEA框架的客户化设计(三) “插件式”DLL
- 居中“魔法”总结
- Windows微信DPI适配
- 采用Symbol和process.nextTick实现Promise
- MongoDB 如何使定制电子商务变得简单
- 代码重构之路的艰辛
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序开发实战(11):滚动组件(picker)
- Docker六脉神剑 (五) Docker Swarm集群搭建及基础服务部署
- 思科模拟器GNS3将路由器变成交换机的方法
- docker安装nginx并配置https
- Docker Swarm集群部署lnmp+redis
- Maven快速入门
- TomCat安装及快速部署
- SpringCloud+MyBatis分页处理(前后端分离)
- 手把手教你搭建SpringCloud项目
- SpringCloud的@Value注解及GitLab配置使用
- 使用 cdk8s 与 Argo CD 进行 GitOps 实践
- 设计模式 | 模版方法
- Python 函数3000字使用总结
- 3D摇杆控制器一种简单实现!Cocos Creator 3D!
- 数据结构 | TencentOS-tiny中队列、环形队列、优先级队列的实现及使用