介绍Ajax与jQuery技术
Ajxs技术(异步的JavaScript与XML)已有多种技术的组合
Ajax的优点是什么?
1.可以实现客户端的异步请求操作2.进而在不需要刷新页面的情况下与服务器进行通信,减少用户的等待时间3.减轻服务器和带宽的负担,提供更好的服务响应。4.可以调用XML等外部数据,进而促进页面显示和数据的分离。5.基于标准化的并被广泛支持技术,不需要下载插件或者小程序。
其中最核心的技术就是XMLHttpRequest。它是一个具有应用程序的JavaScript对象,能够使用HTTP连接一个服务器。
Ajax的工作流程
1.发送请求
Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。发送请求:(1)发送GET请求(2)发送POST请求
两种请求都是需要经过四个步骤:
(1)初始化XMLHttpRequest对象:提高程序的兼容性;
http_request=new XMLHttpRequest();
(2)为XMLHttpRequest对象指定一个回调函数,用于返回结果进行处理;
http_request.onreadystatechange= getResult; //调用回调函数
如果需要指定传递参数,可以使用:
http_request.onreadystatechange=function(){ getResult( param) }
(3)创建一个与服务器的连接。(GET / POST)(是否采用异步发送 ture)
a) http_request.open(‘GET’,url,true); 采用异步方式发送GET请求
b) http_request.open(‘POST’,url,true); 采用异步方式发送POST请求
其中open()方法中的url参数可以是一个JSP的url地址,也可以是Servlet的映射地址。
指定URL参数时,最好加个时间,为了防止因浏览器缓存结果而不能实时得到最新的结果:
String url=“GG.jsp?n=”+new Date().getTime();
(4)向服务器发送请求。利用XHR对象的send()方法可以实现;
a) 向服务器发送GET请求,参数可以设置为NULL
http_request.send( null );
b) POST 参数可以是组合参数
Var param=“user”+***.value+...;
http_request.send( param );
发送POST请求前需要设置正确的请求头:
http_request.setRequestHeader(“”,“”); 需要放在send前
2.处理服务器的响应
XHR对象提供了两个用来访问服务器响应的属性:1.responseText属性,返回字符串响应;2.responseXML属性,返回XML响应。
---------分割线-------------------------------------------------------------------------------------------------------
Last.jQuery
由于Ajax的工作流程比较繁琐,每次需要编写大量的JavaScript代码,jQuery便是可以简化之实现Ajax;
1.简介
jQuery是一套简洁、快速、灵活的JavaScript脚本库。类似java的类库,将工具方法和对象方法封装在自己的类库里,方便用户使用
从“$”“()”开始
下载后放入js文件夹中:
<script src=”JS/文件名.js” type=“text/JavaScript”></JavaScript>
2.JQ的工厂函数
a) 在参数中使用标记名
- $(“div”):用于获取文档中全部的<div>
b) 在参数中使用ID
- $(“#username”):用于获取文档中ID属性为username的一个元素
c) 在参数中使用CSS类名
- $(“.btn_grey”):用于获取文档中使用CSS类名为btn_grey的所有元素
3.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("我是一个jQuery脚本!");
});
});
</script>
</head>
<body>
<a href="#">弹出对话框</a>
</body>
</html>
结果出有一个链接,点击后会弹出一个对话框
以上介绍,详细以后慢慢罗列。
介绍Ajax与jQuery技术的更多相关文章
- [转载]JavaEE学习篇之——JQuery技术详解
原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...
- 第四章 Ajax与jQuery
第四章 Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- 《jQuery技术内幕:深入解析jQuery架构设计与实现原理》
<jQuery技术内幕:深入解析jQuery架构设计与实现原理> 基本信息 作者: 高云 出版社:机械工业出版社 ISBN:9787111440826 上架时间:2014-1-10 出版日 ...
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- springboot04 Ajax json Jquery
一.Ajax 1.同步&异步请求 在所有的请求响应交互世界里,我们有通常会划分出来两种形态的请求, 一种是同步请求.另一种是异步请求 .比如注册.登录.添加数据等等这些请求执行的就是同步请求, ...
- JavaEE-09 Ajax与jQuery在JavaEE项目中的使用
学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度 ...
- J2EE学习篇之--JQuery技术具体解释
前面我们解说了的J2EE的技术都是服务端的技术,以下我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简单介绍: jQuery由美国人John Resig创建,至今已吸引了来自世界各 ...
- J2EE学习篇之--JQuery技术详解
前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
随机推荐
- 第10章 RDB持久化
Redis是一种内存数据库,掉电即失,为了解决这个问题Redis提供了RDB持久化功能,该功能可以把Redis中的内容以RDB文件的形式存储在硬盘上,并且每次RedisServer启动的时候都会尝试从 ...
- Python:Day52 urls
Django的2.0版本之后使用新的规则,之前的url变成了path,如果要使用正则还需要引入re_path from django.urls import path,re_path urlpatte ...
- 【移动端】单位em相关资料
https://www.cnblogs.com/koubazhuanshu/p/6985331.html https://www.w3cplus.com/css/px-to-em 不建议使用 作者:s ...
- Python socket套接字简单例子
- multi函数
def multi(*a): sum = 1 for i in a: sum = sum *i return sum 若干个参数 百度了一下
- 一、Oracle 安装
一.oracle的安装和链接1.oracle数据库的后台服务: a.Oracle11ghomeTNSListener:数据库服务器的监听程序,负责监听客户端的链接请求 b.OracleServiceO ...
- Spring Security(二十七):Part II. Architecture and Implementation
Once you are familiar with setting up and running some namespace-configuration based applications, y ...
- linux初次入门学习小结
linux系统目录结构: 通过ls / 命令可以获得linux目录结构 bin boot dev etc home lib lib64 media mnt opt proc root sbin sel ...
- Java NIO1:浅谈I/O模型
一.什么是同步?什么是异步? 同步和异步的概念出来已经很久了,网上有关同步和异步的说法也有很多.以下是我个人的理解: 同步就是:如果有多个任务或者事件要发生,这些任务或者事件必须逐个地进行,一个事件或 ...
- .net core实践系列之短信服务-架构优化
前言 通过前面的几篇文章,讲解了一个短信服务的架构设计与实现.然而初始方案并非100%完美的,我们仍可以对该架构做一些优化与调整. 同时我也希望通过这篇文章与大家分享一下,我的架构设计理念. 源码地址 ...