Ajax初始接触
演示JS对象的属性,方法和事件的使用
(1)window.location.href
(2)form.submit()
<form action="" method="POST"> <input type="button" value="提交到服务端" onclick="doSubmit()"/> </form> <script type="text/javascript"> function doSubmit(){ //表单提交 document.forms[0].submit(); } </script>
(3)inputElement.onblur = 函数 onblur 事件会在对象失去焦点时发生。
(4)document.createElement(“img”) createElement() 方法可创建元素节点
(5)imgElement.style.width/height
什么是AJAX
客户端(特指PC浏览器)与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术 即,AJAX是一个【局部刷新】的【异步】通讯技术AJAX不是全新的语言,是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言
不用刷新整个页面便可与服务器通讯的办法有:
(A)Flash/ActionScript
(B)框架Frameset
(C)iFrame(内嵌入框架)
(D)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景:早上IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,
IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
也可以使用ActiveXObject对象。
无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来
AJAX开发步骤
1:创建AJAX异步对象,例如:createAJAX()
2:准备发送异步请求,例如:ajax.open(method,url)
3:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()
如果是GET请求的话,无需设置设置AJAX请求头
4:真正发送请求体中的数据到服务器,例如:ajax.send()
5:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数
6:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面
Ajax案例
前台
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> 当前时间:<span id="time"></span><br/> <input type="button" name="" value="获取当前时间" id="buttonId"> <script type="text/javascript"> document.getElementById("buttonId").onclick = function() { //1、创建AJAX对象 var ajax = createAJAX(); //2、准备发送请求 var method = "GET"; //为了适应IE浏览器对其不变的地址缓存,以致其不会继续去发送请求,所以加上时间,保证唯一 var url = "${pageContext.request.contextPath}/TimeServlet?time="+new Date().getTime(); ajax.open(method, url); //3、真正发送请求的具体数据到服务器,如果球体中无数据,就用null表示 ajax.send(null); /*4、Ajax异步对象不断监听服务器 一定要状态变化后,才会触发function(){}函数 如果状态永远不变,不会触发function(){}函数 */ ajax.onreadystatechange = function() { //如果状态码为4 if (ajax.readyState == 4) { //如果响应码为200 if (ajax.status == 200) { //5、从ajax异步对象中获取服务其相应的Html数据 var str = ajax.responseText; //6、操作数据 document.getElementById('time').innerHTML = str; } } } } function createAJAX() { var ajax = null; try { //如果是IE5——IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { //如果是非IE的话 ajax = new XMLHttpRequest(); } return ajax; } </script> </body> </html>
后台
public class TimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String str=sdf.format(new Date()); //以流的形式将结果响应到ajax异步对象中 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw=response.getWriter(); pw.write(str); pw.flush(); pw.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
Ajax初始接触的更多相关文章
- js-jquery 中$.ajax -浅显接触
工作了将近2年,终于开始自己写ajax了!!!真紧张的! 当年培训时就没有学ajax,就让我们自己看看,我是那种主动学习的人吗?不是!!!所以搞不懂ajax!!!!! 在工作中,数据的绑定我们之前都是 ...
- 三、jQuery--Ajax基础--Ajax全接触--jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...
- 三、jQuery--Ajax基础--Ajax全接触--Ajax在JS中的应用
Ajax的全称:Asynchronous JavaScript And XML(异步的 JavaScript 和 XML). Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分 ...
- Ajax全接触
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML) 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...
- ajax再接触
贴三个目前写的已经工作了的ajax,并且给出备注: 1.这是第一个ajax以及它的接口文档,需要注意的是1.因为返回数据是xml所以多加了contentType:"application/x ...
- Ajax全接触(2)
例子简介 1.查询员工信息,可以通过输入员工编号查询员工基本信息: 2.新建员工信息,包含员工姓名,员工编号,员工性别,员工职位: 实现: 1.纯html页面,用来实现员工查询和新建的页面: 2.ph ...
- Ajax全接触(1)
Ajax全称:Asynchronous JavaScript and XML(异步的JavaScript和XML) .Ajax不是某种编程语言 是一种在无需重新加载整个网页的情况之下能够更新部分网页的 ...
- 三、jQuery--Ajax基础--Ajax全接触--扩展知识(跨域)
- 三、jQuery--Ajax基础--Ajax全接触--JSON
JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...
随机推荐
- POJ1742--Coins(动态规划)
People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar.One day Tony ...
- 20155326 2017-2018-1 《信息安全系统设计基础》第2周学习及课堂总结myod
20155326 2017-2018-1 <信息安全系统设计基础>第1次学习及课堂总结myod 虚拟机之前出了一些问题,然后我重新弄了一个新的虚拟机. 先在虚拟机里面安装了git. 安完以 ...
- STL容器-- forward_list 用法
http://www.cplusplus.com/reference/forward_list/
- django天天生鲜项目
.后台admin管理天天生鲜商品信息 models里 from django.db import modelsfrom tinymce.models import HTMLField #需要pip安装 ...
- Python自动化开发 - Django【基础篇】
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为: 大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能 ...
- 4.css基础
1 Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2选择器 2.1 写法 选择器 ...
- C# WPF 用MediaElement控件实现视频循环播放
在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...
- AJPFX:外汇的点差和点值
外汇“点差”就是交易商买卖货币之间产生的差值. 要了解点差我们先解释一下“点”的含义:为了精确和方便地表示汇价,一般用5位数字表示,其中最小变化的单位就称为"点".例如:英镑美元货 ...
- soap注入某sql2008服务器结合msf进行提权
原文作者:陈小兵 在实际成功渗透过程中,漏洞的利用都是多个技术的融合,最新技术的实践,本次渗透利用sqlmap来确认注入点,通过sqlmap来获取webshell,结合msf来进行ms16-075的提 ...
- Python-WSGI协议如何实现?
简述浏览器通过WSGI 请求动态资源的过程? 发送 http 请求动态资源给 web 服务器 web 服务器收到请求后通过 WSGI 调用一个属性给应用程序框架 应用程序框架通过引用 WSGI 调用 ...