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. CentOS 7.2安装gitlab-ce

    国内网络原因,gitlab-ce安装包可以在清华大学开源网站镜像站下载:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/ [root@gitlab ~]# ...

  2. Fiddler手机https抓包

    Fiddler手机抓包:https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler 使用说明:https://www.cnbl ...

  3. vmware开发包之vSphere Management SDK

    vSphere Management SDK关于vmware管理等相关功能的.net和java的代码示例. 在其5.5的解压包中 eam:esx agent management表示esx虚机生产环境 ...

  4. 数独高阶技巧之八——SDC

    在本系列的第四篇“简单异数链”中,向大家介绍了XY-Wing等一系列Wing类技巧,并提到可以用(拐弯的)数组的观念来理解这些结构,经过第六篇ALS的学习之后,大家回过头再去看Wing,应该可以发现相 ...

  5. NOIP前刷题记录

    因为本蒻实在太蒻了...对于即将到来的NOIP2018ssfd,所以下决心要把自己近期做过的题目(衡量标准为洛谷蓝题难度或以上)整理一下,归归类,简单地写一下思路,就当作自己复习了吧qwq 本随笔持续 ...

  6. DAY31、socket套接字

    一.复习1.网络编程 软件开发架构 b/s架构 c/s架构 本质都是c/s架构2.互联网协议 OSI七层协议 应用层 表示层 会话层 传输层 网络层 数据链路层 物理连接层3. 物理连接层:建立物理连 ...

  7. AcWing 153. 双栈排序

    https://www.acwing.com/problem/content/155/ #include <cstring> #include <iostream> #incl ...

  8. 洛谷P5264 【模板】多项式三角函数

    题面 传送门 题解 据说有一个叫做欧拉公式的东西 \[e^{ix}=\cos(x)+i\sin(x)\] 别问我为啥我今天第一次看到它 那么显然也有 \[e^{-ix}=\cos(x)-i\sin(x ...

  9. 各大SRC中的CSRF技巧

    本文作者:i春秋签约作家——Max. 一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/ses ...

  10. [Objective-C语言教程]决策结构（10）

    决策结构要求程序员指定一个或多个要由程序评估或测试的条件,以及在条件被确定为真时要执行的一个或多个语句,以及可选的,如果条件要执行的其他语句 被认定是假的. 以下是大多数编程语言中的典型决策结构的一般 ...