【Javascript】ajax(阿甲克斯)

这篇具有很好参考价值的文章主要介绍了【Javascript】ajax(阿甲克斯)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

什么是ajax?

同步与异步

原理

注意

写一个ajax请求 

创建ajax对象

设置请求方式和地址

发送请求

设置响应HTTP请求状态变化的函数


什么是ajax?

是基于javascript的一种用于创建快速动态网页的技术,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,主要用来在前端页面中向服务器后端请求数据。

以前的ajax:

前后端不分离(前后端写在一起),后端返回整个html 

每次更新⼀些数据,他都会整个⽹⻚刷新

现在的ajax:

ajax帮助我们向服务器发异步请求

同步与异步

事件A,事件B

同步: 完成了A事件才能去处理B事件

异步:在事件A进行中可以进行B事件

原理

通过XmlHttpRequest对象向服务器发异步请求,从服务器获取数据

然后通过js来操作DOM⽽更新⻚⾯

它是在 IE5 中⾸先引⼊的,是⼀种⽀持异步请求的技术

简单的说,也就是 javascript 可以及时向服务器提出请求和处理响应,⽽不阻塞程序运行,达到⽆刷新的效果

注意

JavaScript是单线程的,会阻塞代码运⾏,所以引⼊XmlHttpRequest请求处理异步数据

console.log(1);
console.log(2);
console.log(3);
alert(6);
console.log(4);

【Javascript】ajax(阿甲克斯),Javascript,javascript,ajax,开发语言

4没有打印出来,因为同一个时间只能做同一件事。

当我们点击确定的时候,才能打印出4

【Javascript】ajax(阿甲克斯),Javascript,javascript,ajax,开发语言 

避免上述的阻塞, 引⼊XmlHttpRequest请求处理异步数据

onsole.log(1);
console.log(2);
console.log(3);
setTimeout(function (){
    console.log(6);
},4000)
console.log(5);

 setTimeout(function (){
    console.log(6);
},4000)

4秒之后打印6

【Javascript】ajax(阿甲克斯),Javascript,javascript,ajax,开发语言

这里的5不用等setTimeout处理完再打印出来

经过4秒之后

【Javascript】ajax(阿甲克斯),Javascript,javascript,ajax,开发语言

 

写一个ajax请求 

创建ajax对象

var a
  if(window.XMLHttpRequest){
      a=XMLHttpRequest;
  }else{
      a=new ActiveXObject("Microsoft.XML HTTP");
  }

首先判断当前的环境下的window全局下有没有 XMLHttpRequest

设置请求方式和地址

 a.open('GET',"http://localhost:xxx");

或 文章来源地址https://www.toymoban.com/news/detail-735316.html

  a.open('POST',"http://localhost:xxx");

发送请求

  a.send()

设置响应HTTP请求状态变化的函数

/* 
注册事件。 onreadystatechange事件,状态改变时就会调用。
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
*/
xhr.onreadystatechange = function () {
  // 为了保证数据完整返回,我们一般会判断两个值
  if (xhr.readyState === 1 && xhr.status === 200) {
    alert(xhr.responseText);
  } else {
    alert('出错了,Err:' + xhr.status);
  }
};

到了这里,关于【Javascript】ajax(阿甲克斯)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript全解析——Ajax(上)

    ●认识前后端交互 ○就是 前端 与 后端的 一种通讯方式 ○主要使用的技术栈就是 ajax (async javascript and xml) ●ajax 特点 ○使用 ajax 技术网页应用能够快速的将新内容呈现在用户界面 ○并且不需要刷新整个页面, 也就是能够让页面有 \\\"无刷更新\\\" 的效果 ●注意点: ○前后端交互只

    2024年02月08日
    浏览(101)
  • AJAX (Asynchronous JavaScript And XML)异步的JavaScript 和 XML

    Asynchronous JavaScript And XML     异步的JavaScript 和 XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他操

    2024年02月09日
    浏览(42)
  • 什么是AJAX?如何使用原生JavaScript搭建AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(46)
  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(41)
  • JavaScript全解析——Ajax是什么(上)

    AJAX 是 Asynchronous JavaScript And XML 的缩写。 它不是一种编程语言。它是一种基于 HTML、CSS、JavaScript 和 XML ,让开发更好、更快和更有互动的 Web 应用的技术。 前后端交互就是前端与后端的一种通讯方式,主要使用的技术栈就是 ajax (async javascript and xml 使用 ajax 技术网页应用能够

    2024年02月05日
    浏览(46)
  • 探索异步交互:JavaScript AJAX 的全面指南

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-AjAx 目录 AJAX AJAX 的优势 AJAX 的使用 创建一个 ajax 对象 配置链接信息 发送请求 一个基本的 ajax 请求 ajax 状态码 readyStateChange resp

    2024年02月03日
    浏览(52)
  • 第十一篇JavaScript JSON与AJAX

    在JavaScript中,JSON(JavaScript Object Notation)是一种常用的数据格式,用于存储和交换数据。它基于JavaScript的对象字面量语法,但具有更宽松的语法规则。 json 是一种轻量级的数据交换格式 。 JSON使用键值对的方式表示数据,其中键是一个字符串,值可以是字符串、数字、布尔

    2024年04月16日
    浏览(35)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • 深入了解JavaScript中的AJAX和HTTP请求

    在现代Web开发中,AJAX(Asynchronous JavaScript and XML)和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。 AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的技术。传统的浏览器请求页面会刷新整个页面,而AJAX允许在不刷新页

    2024年02月08日
    浏览(46)
  • JavaScript中最重要的一环之一,ajax发送请求!!

    如需向服务器发送请求,我们使用 XMLHttpRequest 对象的  open()  和  send()  方法: 方法 描述 open( method ,  url ,  async ) 规定请求的类型 method :请求的类型:GET 还是 POST url :服务器(文件)位置 async :true(异步)或 false(同步) send() 向服务器发送请求(用于 GET) send( stri

    2024年01月17日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包