【AJAX】AJAX技术详细解析以及实例(1)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 【AJAX】AJAX技术详细解析以及实例

Ajax技术介绍:

全称: Asynchronized(异步) Javascript And Xml

技术组成有: Javascript、DOM、CSS 和 XMLHttpRequest

AJAX = 异步 JavaScript 和 XML。

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

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

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

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

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

variable=new XMLHttpRequest();

老版本的 Internet Explorer (IE6、IE5)使用 ActiveX 对象:

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

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 对象的两个方法:

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)

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

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

异步 - True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

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

通过 AJAX,JavaScript 无需等待服务器的响应,而是:
    在等待服务器响应时执行其他脚本
    当响应就绪后对响应进行处理

Async = true

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    //还可以加函数
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

xmlhttp.open("GET","test1.txt",false);

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

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

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

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

send(string)

将请求发送到服务器。
    string:仅用于 POST 请求
    类似:"name=jack&pwd=1234"

使用get方式提交:

get方式有可能得到的是浏览器缓存的结果,这个时候我们可以传递一个时间去请求.

为了避免这种情况,请向 URL 添加一个唯一的 ID:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果希望通过 GET 方法发送信息,请向 URL 添加信息:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

使用post方式提交:

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

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

选择GET 还是 POST?

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

然而,在以下情况中,请使用 POST 请求:

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

获得来自服务器的响应

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

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

responseText 属性

如果来自服务器的响应并非 XML,请使用 responseText 属性。

responseText 属性返回字符串形式的响应,因此您可以这样使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

请求 books.xml 文件,并解析响应:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

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

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

下面是 XMLHttpRequest 对象的三个重要的属性:

onreadystatechange:
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化-对象已建立,但是尚未初始化(尚未调用open方法) 
    1: 服务器连接已建立-对象已建立,尚未调用send方法 
    2: 请求已接收- send方法已调用,但是当前的状态及http头未知 
    3: 请求处理中- 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, 
    4: 请求已完成,且响应已就绪-数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
status:
200: "OK"
404: 未找到页面

注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。

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

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }



目录
相关文章
|
6天前
|
存储 弹性计算 应用服务中间件
阿里云经济型e与通用算力型u1实例长效特价云服务器解析,性能与性价比的完美平衡
阿里云目前有两款深受个人和普通企业用户喜欢的特价云服务器,ECS 经济型e实例2核2G,3M固定带宽,40G ESSD Entry云盘,仅需99元1年。ECS u1实例2核4G,5M固定带宽,80G ESSD Entry盘,仅需199元1年。新老同享,活动期间新购、续费同价。很多用户关心这两款云服务器性能怎么样?本文将对阿里云2024年推出的特价云服务器进行深度解析,从性能、价格、适用场景等多个维度进行详细探讨,以供选择参考。
阿里云经济型e与通用算力型u1实例长效特价云服务器解析,性能与性价比的完美平衡
|
6天前
|
物联网 大数据 定位技术
基于RFID、室内定位技术的图书馆定位系统功能解析
维小帮图书馆定位导航系统解决了复杂布局与找书难题,采用RFID、室内定位技术,结合大数据与云计算,提供电子地图、VR云览、AR导航及图书位置指引。通过集成座位预约,优化资源分配,提升读者体验,促进图书馆与城市的智慧化建设。
41 3
基于RFID、室内定位技术的图书馆定位系统功能解析
|
5天前
|
域名解析 缓存 网络协议
深入理解Linux下的DNS技术
Linux DNS详解:连接用户与网络资源的关键,涉及基本原理、DNS服务器软件如BIND、PowerDNS、Dnsmasq、解析过程、缓存及系统配置。理解这些有助于优化网络性能和安全。配置文件 `/etc/resolv.conf` 用于指定DNS服务器,而DNS缓存提升响应速度。学习DNS技术,提升系统效率与可靠性。
33 7
|
3天前
|
机器学习/深度学习 自然语言处理
深入解析深度学习中的正则化技术
【7月更文挑战第21天】深度学习模型在追求高精度的同时,也面临着过拟合的风险。本文将探讨如何通过正则化技术来平衡模型复杂度与泛化能力,包括L1与L2正则化、Dropout、数据增强和早停等策略。我们将分析这些方法的工作原理及其在实际问题中的应用效果,并讨论如何选择合适的正则化技术以优化深度学习模型的性能。
|
3天前
|
JavaScript 前端开发 搜索推荐
服务器端渲染技术SSR与ISR:深入解析与应用
【7月更文挑战第20天】服务器端渲染(SSR)和增量静态再生(ISR)作为现代Web开发中的两种重要渲染技术,各有其独特的优势和适用场景。在实际应用中,开发者应根据具体需求和条件选择合适的渲染模式。无论是追求极致的页面加载速度和SEO优化,还是实现内容的实时更新,SSR和ISR都能提供有效的解决方案。通过深入理解这些技术的工作原理和应用场景,开发者可以构建出更加高效、可靠和用户体验优异的Web应用。
|
3天前
|
监控 负载均衡 安全
微服务架构下的服务发现与注册:技术深度解析
【7月更文挑战第20天】服务发现与注册是微服务架构中不可或缺的一部分,它确保了服务间的动态发现和通信。通过选择合适的实现工具和遵循最佳实践,可以构建出高效、可靠、可扩展的微服务系统。随着技术的不断进步,未来我们还将看到更多创新的服务发现与注册解决方案的出现。
|
3天前
|
存储 JSON 安全
OAuth2与JWT在API安全中的角色:技术深度解析
【7月更文挑战第20天】OAuth2和JWT作为两种重要的安全协议,在API安全中发挥着不可或缺的作用。OAuth2通过提供灵活的授权框架,实现了对资源的细粒度访问控制;而JWT则通过其紧凑性和自包含性,确保了身份验证和信息传输的安全性。在实际应用中,将OAuth2和JWT结合使用,可以构建出既强大又安全的API服务,为用户提供更加安全、可靠和便捷的数字体验。
|
8天前
|
算法 安全 API
淘宝获得淘口令真实URL接口的技术解析
淘口令是淘宝的加密链接,用于商品推广。官方未提供直接解密API,但第三方工具或API能模拟解析。示例代码展示了如何通过第三方接口(需替换为真实接口)获取淘口令所对应的URL、标题和图片信息,但使用时需注意安全风险。
|
2天前
|
运维 Kubernetes Docker
|
5天前
|
JSON 监控 数据挖掘
阿里巴巴商品详情接口技术深度解析
阿里巴巴商品详情接口允许开发者通过API获取平台商品的详细信息,如名称、价格、库存等,支持实时更新和高并发访问。使用流程包括注册认证、获取AccessToken、构造请求、发送及解析响应。应用涵盖商品展示、数据分析、库存管理。开发者需注意合规使用、数据安全和性能优化。

推荐镜像

更多