1 Ajax简介

1 ajax概念

2 什么是同步？什么是异步？

3 ajax原理

2 JavaScript原生的ajax

1 ajax.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function fn1(){

        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

        var xmlHttp = new XMLHttpRequest();

        //2、绑定监听 ---- 监听服务器是否已经返回相应数据

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState==4&&xmlHttp.status==200){

                //5、接受相应数据

                var res = xmlHttp.responseText;

                document.getElementById("span1").innerHTML = res;

            }

        }

        //3、绑定地址

        xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);

        //4、发送请求

        xmlHttp.send();

    }

    function fn2(){

        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

        var xmlHttp = new XMLHttpRequest();

        //2、绑定监听 ---- 监听服务器是否已经返回相应数据

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState==4&&xmlHttp.status==200){

                //5、接受相应数据

                var res = xmlHttp.responseText;

                document.getElementById("span2").innerHTML = res;

            }

        }

        //3、绑定地址

        xmlHttp.open("POST","/WEB22/ajaxServlet",false);

        //4、发送请求

        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xmlHttp.send("name=wangwu");

    }

</script>

</head>

<body>

    <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>

    <br>

    <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>

    <br>

    <input type="button" value="测试按钮" onclick="alert()">

</body>

</html>

2 AjaxServlet代码

package www.test.ajax01;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        //response.getWriter().write("zhangsan");

        /*try {

            Thread.sleep(5000);

        } catch (InterruptedException e) {

            e.printStackTrace();

        }*/

        String parameter = request.getParameter("name");

        response.getWriter().write(Math.random()+parameter);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}

3 注意事项

4 ajax图解

Ajax(Asychronous JavaScript and XML)笔记的更多相关文章

  1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  2. 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。

    指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Stan ...

  3. ajax(Asynchronous JavaScript and XML) 异步js或者xml

    1.XMLHttpRequest 对象:向服务器发送局部的请求,异步获取执行 a.浏览器支持 b.语法: xmlhttp==new XMLHttpRequest(); xmlhttp.open(&qu ...

  4. How to make an HTTP request 异步 JavaScript 和 XML

    https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started In order to make an HTTP request to th ...

  5. AJAX异步的 JavaScript

    什么是AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. ...

  6. 【JavaScript】AJAX总结（异步JavaScript和XML）

    AJAX介绍 通过 AJAX,你可以创建更好.更快以及更友好的 WEB 应用程序. AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象. AJAX 应用程 ...

  7. AJAX（Asynchronous JavaScript And XML）

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  8. Javascript & JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

  9. ajax-异步JavaScript和XML

    什么是ajax? ajax是异步的javascript和XML ( Asynchronous Javascript And XML ) 优点:节省用户操作时间,提高用户体验.减少数据请求次数. 什么是 ...

随机推荐

  1. HBASE的优化、hadoop通用优化，Linux优化，zookeeper优化，基础优化

    HBase 的优化3.1.高可用在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果Hmaster 挂掉了,那么整个 HBa ...

  2. 13 Amazing Component Sets Driving Success In Delphi Berlin On Android And IOS

    There are quite a few Firemonkey component sets available for Delphi Berlin which can get you ahead ...

  3. CentOS 傻瓜式部署uWSGI + nginx + flask

    交代背景 这篇帖子是为了提供我自己的July Novel站点的小说数据支撑.解决分布式部署爬虫程序的繁琐过程,由于本人对shell编程并不熟悉,故而先逐步记录操作步骤,通过以下操作达到节省时间的方式. ...

  4. 874. Walking Robot Simulation

    A robot on an infinite grid starts at point (0, 0) and faces north.  The robot can receive one of th ...

  5. CSS单行超长溢出如何处理？表格某一行某一列超长如何处理？

    表格某一行某一列超长 截取一部分 并增加...效果 增加titile ======================================================== <td t ...

  6. CF1106F Lunar New Year and a Recursive Sequence（矩阵快速幂+bsgs+exgcd）

    题面 传送门 前置芝士 \(BSGS\) 什么?你不会\(BSGS\)?百度啊 原根 对于素数\(p\)和自然数\(a\),如果满足\(a^x\equiv 1\pmod{p}\)的最小的\(x\)为\ ...

  7. 五，Smarty模板技术/引擎——自定义函数机制

    自建函数是smarty提供的函数,不允许修改,只能被调用: 自定义函数是自己编写函数,注册成为smarty的函数,之后可以被调用: 示例:使用smarty自定义函数的机制,编写一个函数myfun1,通 ...

  8. CentOS 下安装 Hexo 博客

    前言: 之前一直使用Wordpress架构作为博客网站架构,但是现在频频爆出漏洞.实在是不敢用也不想用了,然后群里面有小伙伴用的是 Github 搭建 Hexo 架构博客.就写了这个教程,给自己做个参 ...

  9. 什么是cluster（群集）

    一.群集的概念 在互联网应用中,随着站点对硬件性能.相应速度.服务稳定性.数据可靠性等要求越来越高,单台服务器力不从心,使用小型机或大型机价格还太昂贵,因此我们使用普通服务器来构建服务群集显然最划算. ...

  10. 点击按钮添加一行,和本行的删除功能,序号变动,name属性更改

    <!--html结构--> <div> <input type="button" value="添加一行" onclick=&qu ...