【学习笔记】AJAX入门

最新推荐文章于 2024-07-26 00:46:32 发布
最新推荐文章于 2024-07-26 00:46:32 发布
阅读量127 收藏
点赞数
文章标签： ajax 学习 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RachelY111/article/details/127625278
版权

简介

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

AJAX 是一种用于创建快速动态网页的技术。

AJAX 是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。

AJAX 是一种独立于Web服务器软件的Web浏览器技术。

AJAX 使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

使用AJAX，当您点击提交时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。

当客户端程序在后台请求来自服务器的信息时，用户可以继续使用该应用程序。

数据驱动而不是页面驱动。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

**注意：**Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

工作原理

在这里插入图片描述

基本使用

XHR-创建对象

XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。

XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

它执行以下操作：

  1. 在后台从客户端发送数据
  2. 从服务器接收数据
  3. 更新网页而不重新加载。
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");
  }

XMLHttpRequest对象的属性

属性描述
onreadystatechange存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。
readyState存有的XMLHttpRequest的状态从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪
response Text以文本形式返回响应。
responseXML以XML格式返回响应
status将状态返回为数字（例如，“Not Found”为404，“OK”为200）
status Text以字符串形式返回状态（例如，“Not Found”或“OK”）

XMLHttpRequest对象的方法

方法描述
abort()取消当前请求。
getAllResponseHeaders()以字符串形式返回完整的HTTP标头集。
getResponseHeader( header Name )返回指定HTTP标头的值。
void open（method，URL）打开指定获取或交的方法和URL的请求。
void open（method，URL，async）与上面相同，但指定异步或不。
void open（method，URL，async，userName，password）与上面相同，但指定用户名和密码。
void send（content）发送获取请求。
setRequestHeader（ label，value）将标签/值对添加到要发送的HTTP标头。

XHR-请求

AJAX工作流程

在这里插入图片描述

  1. 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。
  2. HTTP 请求由 XMLHttpRequest 对象发送到服务器。
  3. 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
  4. 检索数据。
  5. 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
  6. HTML 和 CSS 数据显示在浏览器上。

向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);        
xmlhttp.send();
方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)将请求发送到服务器。string：仅用于 POST 请求
url-服务器上的文件

open()方法的url参数是服务器上文件的地址

该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。

async-异步

XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync(async)参数必须设置为 true。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理
true-异步

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

false-同步

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到send()语句后面即可

GET

可以利用?、&在url后传参

GET请求具有以下的几个特点：

  • GET请求可被缓存
  • GET请求保留在浏览器历史记录中
  • GET请求可被收藏为书签
  • GET请求不应在处理敏感数据时使用
  • GET请求有长度限制
  • GET请求只应当用于取回数据

POST

如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法描述
setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值

POST请求的特点如下：

  • POST请求不会被缓存
  • POST请求不会保留在浏览器历史记录中
  • POST请求不能被收藏为书签
  • POST请求对数据长度没有要求

对比

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

在以下情况中，请使用POST请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST没有数据量限制）
  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

XHR-响应

  • 状态行
    xhr.status状态码，如200，304，404等；
  • 响应主体
    xhr.responseText与xhr.responseXML都表示响应主体。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

对于responseText属性，只有当 readyState属性值变为4时，responseText属性才可用，因为这表明AJAX请求已经结束！

XHR-readyState

onreadystatechange 事件

每当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有 XMLHttpRequest 的状态信息。

属性描述
onreadystatechange存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status200: “OK” 404: 未找到页面

readyState状态说明

0：请求未初始化【还没有调用 open()】

此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。

1：服务器连接已建立【但是还没有发送，还没有调用 send()】

此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url, true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。

值为1表示正在向服务端发送请求。

2：请求已接收【在处理中（通常现在可以从响应中获取内容头）】

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。

值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。

3：请求处理中【通常响应中已有部分数据可用了，没有全部完成】

此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。

状态3表示正在解析数据。

4：请求已完成，且响应已就绪【可以获取并使用服务器的响应了】

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

整个XMLHttpRequest对象的生命周期应该包含如下阶段：

  1. 创建【0】
  2. 初始化请求【1】
  3. 发送请求【1】
  4. 接收数据【2】
  5. 解析数据【3】
  6. 完成【4】

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {	//	响应就绪后处理
    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）

var xmlhttp;
function loadXMLDoc(url, cfunc) {
    if (window.XMLHttpRequest) { 
        // IE7+, Firefox, Chrome, Opera, Safari 代码
        xmlhttp = new XMLHttpRequest();
    } else { 
        // IE6, IE5 代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = cfunc;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
function myFunction() {
    loadXMLDoc("https://www.w3cschool.cn/statics/demosource/ajax_info.txt", function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}

扩展

AJAX提交form表单方法

AJAX提交表单分为两种

1、无返回结果的

就是把表单数据直接提交给后台，让后台直接处理；

最简单的就是$(“#formid”).submit();直接将form表单提交到后台。

2、返回有结果的

这种情况下，后台不管是执行成功还是失败，最终的信息都需要返回到前台。

第二种是使用最多的一种，因为程序的执行成功与否都需要给用户提示，程序一般也都是多步完成的，执行完插入操作，需要发起流程，这就需要在界面上判断成功与否。ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。

有返回结果的有两种实现方式

  1. 将form表单数据序列化

    配置data参数为$('#yourformid').serialize()

    使用这种方法的前提是form表单中的项一定要有name属性，后台获取的键值对为 key=name 值，value=各项值。

  2. 通过窗口查找form提交

    <span style="font-size:18px;">  // 提交表单  
  var obj = document.getElementById("xx_iframe").contentWindow;  
  obj.$("#yourform").form("submit",{  
    success :function(data){  
        //对结果处理  
    }    
  });
</span>

    因为在当前界面上弹出对话框，然后在对话框上的按钮触发对话框中表单提交，对话框又是链接的另外的html页面，如此通过$(“#formid”)的方式是找不到对话框中的form的，因此这种情况下只能使用这种方式提交表单。

总的来说，无返回结果的和有返回结果的(将form表单数据序列化+通过窗口实现form提交)，form表单都必须要有name属性。

4种常用AJAX请求方式

在jQuery中，AJAX常见的请求方式主要有一下4种：

1. $.ajax()返回其创建的 XMLHttpRequest 对象

$.ajax() 只有一个参数：参数key/value对象，包含各配置及回调函数信息。

如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 “text/xml”)。

$.ajax({
    type: "post",
    dataType: "html",
    url: '/Resources/GetList.ashx',
    data: dataurl,
    success: function(data) {
        if (data != "") {
            $("#pager").pager({
                pagenumber: pagenumber,
                pagecount: data.split("$")[1],
                buttonClickCallback: PageClick
            });
            $("#anhtml").html(data.split("$")[0]);
        }
    }
});

2. 通过远程 HTTP GET 请求载入信息

相比于复杂的$.ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$.ajax。

$.get("test.cgi", {
    	name: "John",
   		time: "2pm"
	},
      function(data) {
    	alert("Data Loaded: " + data);
});

3. 通过远程 HTTP POST 请求载入信息

POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用$.ajax请求。

$.post("/Resources/addfriend.ashx", {
    "fid": fids,
    "fname": fnames,
    "tuid": tuids,
    "tuname": tunames
}, function(data) {
    if (data == "ok") {
        alert("添加成功！");
    }
})

4. 通过 HTTP GET 请求载入 JSON 数据

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
          function(data) {
    $.each(data.items, function(i, item) {
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if (i == 3) return false;
    });
});

jQuery AJAX

load()方法

语法：$(selector).load(URL,data,callback);

  • 必需的 URL 参数规定您希望加载的 URL。
  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

callback 参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

  • responseTxt - 包含调用成功时的结果内容【data】
  • statusTxt - 包含调用的状态【status】
  • xhr - 包含 XMLHttpRequest 对象【xhr】
$("button").click(function() {
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {
        if (statusTxt == "success")
            alert("External content loaded successfully!");
        if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

**提示：**在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

$.get()方法

语法：$.get(URL,callback);

  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 callback 参数是请求成功后所执行的函数名。
$("button").click(function() {
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {
        if (statusTxt == "success")
            alert("External content loaded successfully!");
        if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

$.post()方法

语法：$.post(URL,data,callback);

  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 data 参数规定连同请求发送的数据。
  • 可选的 callback 参数是请求成功后所执行的函数名。
$(document).ready(function() {
    $("button").click(function() {
        $.post("/statics/demosource/demo_test_post.php", {
            name: "W3Cschool",
            url: "http://www.w3cschool.cn"
        },
               function(data, status) {
            alert("数据: " + data + "状态: " + status);
        });
    });
});

相关资源

https://www.w3cschool.cn/ajax/
https://www.w3cschool.cn/jquery/xcsguf21.html

RachelY111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
Head First Ajax学习笔记
09-05
Head First系列都是入门的绝佳好书！这是Head First Ajax的一些读书笔记，读书需要越读越薄，仅供学习。
jQuery学习笔记之入门
01-21
最近在学习jQuery，在网上看到有几篇关于jQuery的文章，写的不错转载过来跟大家分享一下； 一、JQuery是什么 JQuery是什么？始终是萦绕在我心中的一个问题： 借鉴网上同学们的总结，可以从以下几个方面观察。 不使用...
JSON 入门教程基础篇 json入门学习笔记
10-14
JSON广泛应用于AJAX（Asynchronous JavaScript and XML）应用程序中，因为JSON数据可以轻松地在服务器和客户端之间进行传输，并且JavaScript可以快速解析JSON数据，直接操作页面元素，实现页面动态更新。在上述提供...
json 入门学习笔记 示例代码
12-01
示例中的`$.get()`函数是jQuery的一个Ajax方法，用于异步从服务器获取数据。在这里，它接收三个参数：URL（"json1.aspx?m=m"），数据（null，表示没有发送任何数据到服务器），以及一个回调函数，该函数将在数据...
某数据泄露防护(DLP)系统NoticeAjax接口SQL注入漏洞复现 [附POC]
薛定谔嘚喵博客
07-23 227
某数据泄露防护(DLP)系统是一款综合性的数据安全产品，旨在通过多种先进技术手段保护企业的敏感数据，防止数据泄露。某数据泄露防护(DLP)系统存在SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感数据。
AvaloniaUI的学习
lishuangquan1987的博客
07-25 612
官方中文文档：https://docs.avaloniaui.net/zh-Hans/docs/welcome。
编程学习之路：从零到一的成长指南
KsuferNotes
07-22 464
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
FastAPI（七十一）实战开发《在线课程学习系统》接口开发-- 查看留言
mr~li的博客
07-24 264
梳理后发现，之前在接口设计的时候，有些欠缺，查看留言，是查看单个的留言，查看留言后，对应的留言变成已读状态。那么我们这个都需要传递一个参数，这个参数应该是留言的id。之前FastAPI（七十）实战开发《在线课程学习系统》接口开发--留言功能开发分享了留言开发，这次我们分享查看留言。在之前设计返回状态码的时候，发现状态码有缺失，我们增加下缺失的。3.判断是否是当前用户的留言，或者接受的方是自己。梳理这里的逻辑，这个接口要依赖登录。5.如果已读且回复了，要带回复的内容。以上则是实现查看留言的接口逻辑。
学习华为IPD流程黑话2.0
产品线负责人
07-23 536
管道管理是指根据资源需求（管道需求）尽早地对可获得性资源（管道供给）进行平衡，任何企业做研发、做产品，它的可用资源都是有限的，可以把企业的资源比喻成管道。既是对产品包进行验证，也是内部技能传递的重要环节，同时能为客户带来价值。这个时候就只需要对切片的概念做一下了解就应该可以直接应用了。而且主要做的是 C 语言，Python 也确实没具体用过。并保证在任意时刻产出的研发价值（即出口流量）的最大化，好了，这个话题就不展开来讲了，后续可以单独展开聊聊。评审的对象是新产品的业务计划，而不是产品的开发计划。
DP学习——外观模式
huibin.yun的博客
07-24 268
学而时习之，温故而知新。
后端开发工程师vue2初识的学习
音符犹如代码的博客
07-24 1016
快速认识vue
昇思25天学习打卡营第22天 | DCGAN生成漫画头像
qq_31254435的博客
07-23 904
这一节介绍了深度卷积生成对抗网络DCGAN，相对于经典的GAN网络来说，将生成器中的全连接层换成了反卷积层，而将判别器中的全连接层换成了卷积层，其训练过程和GAN网络基本一样。通过在70171张动漫头像上进行训练，使得该对抗网络能够生成动漫头像图片。
学习笔记---java篇（0723）
m0_70630166的博客
07-23 801
java、数据类型、循环、选择等
sklearn基础学习
招风的黑耳CSDN
07-23 725
sklearn，或者更正式地称为scikit-learn，是一个基于Python的开源机器学习库。它建立在NumPy、SciPy和matplotlib之上，提供了简单而有效的工具用于数据挖掘和数据分析。sklearn支持监督学习和无监督学习算法，包括分类、回归、聚类和降维等。
freertos的学习cubemx版
最新发布
qq_42584266的博客
07-26 467
https://space.bilibili.com/3805161 基于这个B站博主的学习记录
昇思25天学习打卡营第8天 |昇思MindSpore SSD 目标检测算法 学习与总结
Mr_Orangechen的博客
07-25 520
模型训练设置 epoch 次数为 60，batch_size 为 5，图像尺寸为 300×300，使用 Momentum 优化器，初始学习率为 0.001，使用回调函数监控训练过程，每 10 个 epoch 保存一次模型。目标函数包括预选框与目标类别的置信度误差（confidence loss）和位置误差（location loss），位置损失采用 Smooth L1 Loss，置信度损失采用多类置信度上的 softmax 损失。：对 6 个预测特征图进行卷积操作，得到回归偏移量和类别概率分数。
昇思25天学习打卡营第21天|GAN图像生成
Xavier_F的博客
07-24 1030
MNIST手写数字数据集是一个广泛使用的基准数据集，包含70,000张手写数字图像，其中60,000张用于训练，10,000张用于测试。每张图像为28x28像素的单通道灰度图像，经过归一化和中心化处理，方便模型训练。MNIST是进行图像生成和分类任务的理想选择。
MSPM0G3507学习笔记1：开发环境_引脚认识与点灯
NULL指向我的博客
07-23 1345
今日速通一款Ti的单片机用于电赛：MSPM0G3507
韩顺平Java教程学习笔记：从入门到精通全解析
"这是一份基于韩顺平的Java从入门到精通的视频教程的学习笔记，涵盖了全部94个教学章节。笔记详细整理了Java的基础知识、开发平台、编程方向以及相关工具和特点。" 在Java的世界里，我们首先会接触到两个主要的Java...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值