演示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初始接触的更多相关文章

  1. js-jquery 中$.ajax -浅显接触

    工作了将近2年,终于开始自己写ajax了!!!真紧张的! 当年培训时就没有学ajax,就让我们自己看看,我是那种主动学习的人吗?不是!!!所以搞不懂ajax!!!!! 在工作中,数据的绑定我们之前都是 ...

  2. 三、jQuery--Ajax基础--Ajax全接触--jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...

  3. 三、jQuery--Ajax基础--Ajax全接触--Ajax在JS中的应用

    Ajax的全称:Asynchronous JavaScript And XML(异步的 JavaScript 和 XML). Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分 ...

  4. Ajax全接触

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML) 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...

  5. ajax再接触

    贴三个目前写的已经工作了的ajax,并且给出备注: 1.这是第一个ajax以及它的接口文档,需要注意的是1.因为返回数据是xml所以多加了contentType:"application/x ...

  6. Ajax全接触(2)

    例子简介 1.查询员工信息,可以通过输入员工编号查询员工基本信息: 2.新建员工信息,包含员工姓名,员工编号,员工性别,员工职位: 实现: 1.纯html页面,用来实现员工查询和新建的页面: 2.ph ...

  7. Ajax全接触(1)

    Ajax全称:Asynchronous JavaScript and XML(异步的JavaScript和XML) .Ajax不是某种编程语言 是一种在无需重新加载整个网页的情况之下能够更新部分网页的 ...

  8. 三、jQuery--Ajax基础--Ajax全接触--扩展知识(跨域)

  9. 三、jQuery--Ajax基础--Ajax全接触--JSON

    JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...

随机推荐

  1. POJ1742--Coins(动态规划)

    People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar.One day Tony ...

  2. 20155326 2017-2018-1 《信息安全系统设计基础》第2周学习及课堂总结myod

    20155326 2017-2018-1 <信息安全系统设计基础>第1次学习及课堂总结myod 虚拟机之前出了一些问题,然后我重新弄了一个新的虚拟机. 先在虚拟机里面安装了git. 安完以 ...

  3. STL容器-- forward_list 用法

    http://www.cplusplus.com/reference/forward_list/

  4. django天天生鲜项目

    .后台admin管理天天生鲜商品信息 models里 from django.db import modelsfrom tinymce.models import HTMLField #需要pip安装 ...

  5. Python自动化开发 - Django【基础篇】

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为: 大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能 ...

  6. 4.css基础

    1 Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2选择器 2.1 写法 选择器 ...

  7. C# WPF 用MediaElement控件实现视频循环播放

    在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...

  8. AJPFX:外汇的点差和点值

    外汇“点差”就是交易商买卖货币之间产生的差值. 要了解点差我们先解释一下“点”的含义:为了精确和方便地表示汇价,一般用5位数字表示,其中最小变化的单位就称为"点".例如:英镑美元货 ...

  9. soap注入某sql2008服务器结合msf进行提权

    原文作者:陈小兵 在实际成功渗透过程中,漏洞的利用都是多个技术的融合,最新技术的实践,本次渗透利用sqlmap来确认注入点,通过sqlmap来获取webshell,结合msf来进行ms16-075的提 ...

  10. Python-WSGI协议如何实现?

    简述浏览器通过WSGI 请求动态资源的过程? 发送 http 请求动态资源给 web 服务器 web 服务器收到请求后通过 WSGI 调用一个属性给应用程序框架 应用程序框架通过引用 WSGI 调用 ...