AJAX学习笔记

Ajax是 Asynchronous JavaScript And XML    异步的JavaScript 和 XML。

Posted in Javascript onMay 18, 2021

概念

AJAX学习笔记

异步和同步:客户端和服务器端相互通信的基础上。

  • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。提升用户的体验。

原生Ajax

//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//2. 建立连接
/*
    参数:
        1. 请求方式:GET、POST
            * get方式,请求参数在URL后边拼接。send方法为空参
            * post方式,请求参数在send方法中定义
        2. 请求的URL:
        3. 同步或异步请求:true(异步)或 false(同步)

 */
xmlhttp.open("GET", "ajaxServlet?username=tom", true);

//3.发送请求
xmlhttp.send();

//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取

//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange = function () {
    //判断readyState就绪状态是否为4,判断status响应状态码是否为200
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //获取服务器的响应结果
        var responseText = xmlhttp.responseText;
        alert(responseText);
    }
}

jQuery实现

基本语法如下,有三种方式:

  • $.ajax({键值对})
  • $.get()
  • $.post()

$.ajax()

语法格式如下:

$.ajax({
    url: "请求路径",
    type: "请求方式GET或POST",
    data: "GET请求参数或POST请求参数",
    dataType: "响应数据的格式"
    success: function (data) {
    	// 响应成功后的回调函数,data是响应回来的数据
    },
    error: function () {
        // 响应出现错误时会执行的回调函数
    }
});

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="使用get发送异步请求" onclick="sendAjaxByGet()">
    <input type="button" value="使用post发送异步请求" onclick="sendAjaxByPost()">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    function sendAjaxByGet() {
        $.ajax({
            url:"ajaxServlet1", // 请求路径
            type:"GET", // 请求方式
            data:"username=zhangsan", // 请求参数
            dataType:"json", // 设置接受到的响应数据的格式,如果是json格式则设置为json
            success:function (data) { // 响应成功后的回调函数
                alert(data.msg);
            },
            error:function () { // 响应出现错误时会执行的回调参数
                alert("出错了...");
            }
        })
    }

    function sendAjaxByPost() {
        $.ajax({
            url:"ajaxServlet1", // 请求路径
            type:"POST", // 请求方式
            data:{"username":"zhangsan"}, // 请求参数
            dataType:"json", // 设置接受到的响应数据的格式,如果是json格式则设置为json
            success:function (data) { // 响应成功后的回调函数
                alert(data.msg);
            },
            error:function () { // 响应出现错误时会执行的回调参数
                alert("出错了...");
            }
        })
    }
</script>
</body>
</html>

 

$.get()

基本语法如下:

$.get(url, [data], [callback], [type])
// 参数说明
//  url:指的是请求路径
//  data:请求参数
//  callback:回调函数
//  type:响应数据的类型,如json

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="使用get发送异步请求" onclick="sendAjaxByGet()">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    function sendAjaxByGet() {
        /*
            * 语法:$.get(url, [data], [callback], [type])
				* 参数:
					* url:请求路径
					* data:请求参数
					* callback:回调函数
					* type:响应结果的类型
         */
        $.get("ajaxServlet1", {username: "zhangsan"}, function (data) {
            alert(data.msg);
        }, "json")
    }
</script>
</body>
</html>

$.post()

基本语法如下:

$.post(url, [data], [callback], [type])
// 参数说明
//  url:指的是请求路径
//  data:指的是请求参数
//  callback:指的是响应成功后的回调函数
//  type:指的是响应数据的格式类型

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="使用post发送异步请求" onclick="sendAjaxByPost()">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    function sendAjaxByPost() {
        /*
            * 语法:$.post(url, [data], [callback], [type])
				* 参数:
					* url:请求路径
					* data:请求参数
					* callback:回调函数
					* type:响应结果的类型
         */
        $.post("ajaxServlet1", {username: "zhangsan"}, function (data) {
            alert(data.msg);
        }, "json")
    }
</script>
</body>
</html>

注意,本例用到的后端代码是Java的Servlet,其中AjaxServlet1.java如下:

@WebServlet("/ajaxServlet1")
public class AjaxServlet1 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println(username);
        String json_str = "{\"msg\":\"ajax response success!\"}";
        response.getWriter().print(json_str);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

本节源代码地址:GitHub的Demo

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
JS如何使用剪贴板操作Clipboard API
详解Node.js如何处理ES6模块
May 15 #Javascript
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
You might like
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
简单实现python数独游戏
2018/03/30 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python中partial()基础用法说明
2018/12/30 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
如何写毕业求职自荐信
2013/11/06 职场文书
趣味运动会活动方案
2014/02/12 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
买房委托公证书
2014/04/08 职场文书
经典演讲稿汇总
2014/05/19 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
2015年中个人总结范文
2015/03/10 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android