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) 在参数中使用标记名

  1. $(“div”):用于获取文档中全部的<div>

b) 在参数中使用ID

  1. $(“#username”):用于获取文档中ID属性为username的一个元素

c) 在参数中使用CSS类名

  1. $(“.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技术的更多相关文章

  1. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

  2. 第四章 Ajax与jQuery

    第四章   Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...

  3. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  4. 《jQuery技术内幕:深入解析jQuery架构设计与实现原理》

    <jQuery技术内幕:深入解析jQuery架构设计与实现原理> 基本信息 作者: 高云 出版社:机械工业出版社 ISBN:9787111440826 上架时间:2014-1-10 出版日 ...

  5. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  6. springboot04 Ajax json Jquery

    一.Ajax 1.同步&异步请求 在所有的请求响应交互世界里,我们有通常会划分出来两种形态的请求, 一种是同步请求.另一种是异步请求 .比如注册.登录.添加数据等等这些请求执行的就是同步请求, ...

  7. JavaEE-09 Ajax与jQuery在JavaEE项目中的使用

    学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度 ...

  8. J2EE学习篇之--JQuery技术具体解释

    前面我们解说了的J2EE的技术都是服务端的技术,以下我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简单介绍: jQuery由美国人John Resig创建,至今已吸引了来自世界各 ...

  9. J2EE学习篇之--JQuery技术详解

    前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

随机推荐

  1. Linux下简单的缓冲区溢出

    缓冲区溢出是什么? 科班出身,或者学过汇编的应该知道,当缓冲区边界限制不严格时,由于变量传入畸形数据或程序运行错误,导致缓冲区被“撑爆”,从而覆盖了相邻内存区域的数据 成功修改内存数据,可造成进程劫持 ...

  2. firewall端口放行

    添加 sudo firewall-cmd --zone=public --add-port=10050/tcp --permanent sudo firewall-cmd --add-port=929 ...

  3. Windows下,gVim编辑,Python2应用程序的乱码问题

    Windows,Python2环境下,当gVim配置了 set fileencoding=utf-8,则新建文件编码方式为utf-8. ○   如果代码不包含中文,或者仅包含中文注释,则utf-8编码 ...

  4. XtraDB引擎

    https://mariadb.com/kb/en/library/xtradb-and-innodb/ https://mariadb.com/kb/en/library/about-xtradb/ ...

  5. <网络编程>IO复用

    IO复用是一种机制,一个进程可以监听多个描述符,一旦某个描述符就绪(读就绪和写就绪),能够同志程序进行相应的读写操作. 目前支持I/O复用的系统调用有select,poll,pselect,epoll ...

  6. IIS7启动优化

    最近基于abp做的项目在发布到IIS后,第一次被访问异常缓慢,如果时间间隔久再去访问如第一次访问一般缓慢,为了解决这个问题对项目进行了一下系列操作: 1.优化js.css插件,插件分批加载,充分利用浏 ...

  7. HTML+CSS之盒子模型

    一.元素分类 CSS中html的标签元素大体分为三种类型 1.块状元素 @特点: #每个块级元素都从新的一行开始,并且其后的元素也另起一行(一个块级元素独占一行) #元素的高度.宽度.行高以及顶和底边 ...

  8. 【php增删改查实例】第二十二节 - 引入百度地图

    20.用户新增地址字段 在实际的开发中,经常会出现对数据表新增或者修改字段的事情,所以,当用户提出加字段的需求时,我们的页面以及后台程序都要进行相应的改动. 本节就以增加一个地址字段为例. 打开nav ...

  9. JSP报错:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    今天使用Eclipse+Maven建立了一个Javaweb工程,并在eclipse中配置了Web容器Jboss eap 6.2.新建jsp页面,添加一个简单 的Java类.可是,JSP页面顶端出现“红 ...

  10. MySQL root密码忘记,原来还有更优雅的解法!

    一直以来,对于MySQL root密码的忘记,以为只有一种解法-skip-grant-tables. 问了下群里的大咖,第一反应也是skip-grant-tables.通过搜索引擎简单搜索了下,无论是 ...