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. 浅谈对MVC的理解

    1.MVC设计模式理解 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...

  2. ZKEACMS 自定义表单的使用

    ZKEACMS Core 2.2 已经发布了,其中主要添加了自定义表单的功能.使用自定义表单的功能,您可以在几分钟内就创建一个表单,并用它来收集一些信息.导出收集的信息,就可以做一些统计分析. 创建表 ...

  3. 基于.net standard 的动态编译实现

    在前文[基于.net core 微服务的另类实现]结尾处,提到了如何方便自动的生成微服务的客户端代理,使对于调用方透明,同时将枯燥的东西使用框架集成,以提高使用便捷性.在尝试了基于 Emit 中间语言 ...

  4. 爬虫开发12.selenium在scrapy中的应用

    selenium在scrapy中的应用阅读量: 370 1 引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝 ...

  5. “全栈2019”Java第七十五章：内部类持有外部类对象

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. idea debug 启动慢出现假死

    断点设置不合理引发应用启动慢问题java idea应用启动很慢|非常慢|超级慢的问题排查! 解决关于应用启动超慢这个问题,其实两年前就已经遇到过,https://blog.csdn.net/li396 ...

  7. JMessage Android 端开发详解

    目前越来越多的应用会需要集成即时通讯功能,这里就为大家详细讲一下如何通过集成 JMessage 来为你的 App 增加即时通讯功能. 首先,一个最基础的 IM 应用会需要有哪些功能? 用户注册 / 登 ...

  8. PHP curl 上传文件版本兼容问题

    [摘要:做微疑开辟挪用微疑接心上传文件时,总是返回 {"errcode":41005,"errmsg":"media data missing hin ...

  9. 【UVA11324】 The Largest Clique （Tarjan+topsort/记忆化搜索）

    UVA11324 The Largest Clique 题目描述 给你一张有向图 \(G\),求一个结点数最大的结点集,使得该结点集中的任意两个结点 \(u\) 和 \(v\) 满足:要么 \(u\) ...

  10. Linux rsync 企业级应用

    简介 rsync 是 Linux 下的数据同步工具, 其支持本地同步和远程同步, 远程同步分为 daemon 和 ssh 同步方式    rsync 可以代替 cp, scp 等命令, 且具有更高的可 ...