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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
vuex的使用步骤
Jan 06 Vue.js
react 路由Link配置详解
Nov 11 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中get_object_vars()方法用法实例
2015/02/08 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
Prototype Function对象 学习
2009/07/12 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Vue程序调试的方法
2019/06/17 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python关于反射的实例代码分享
2020/02/20 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
六查六看剖析材料
2014/02/15 职场文书
写求职信有什么意义
2014/02/17 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
感恩寄语大全
2014/04/11 职场文书
激励口号大全
2014/06/17 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年商场工作总结
2015/04/27 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js