ajax原理

栏目: IT技术 · 发布时间: 4年前

内容简介:Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

大家好,今天来和大家谈谈有关ajax的一些事情。要想更好的使用ajax,首先我们要对ajax原理有一定的了解,接下来就带大家一起熟悉一下ajax原理。

ajax原理

ajax的概念

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

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

也就是说ajax是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具接。下面我们来说一下使用ajax的一些好处。

AJAX 的优势

  1. 不需要插件的⽀持,原⽣ js 就可以使⽤
  2. ⽤户体验好(不需要刷新⻚⾯就可以更新数据)
  3. 减轻服务端和带宽的负担

    ajax既然这么好用,那它有什么缺点吗?当然有,ajax的缺点就是:

    搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到。

    ajax原理

    了解了有关ajax的信息之后,就来尝试创建一个ajax对象吧!

    AJAX 的使⽤

    在 js 中有内置的构造函数来创建 ajax 对象

    创建 ajax 对象以后,我们就使⽤ ajax 对象的⽅法去发送请求和接受响应

    创建⼀个 ajax 对象

// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
ajax原理

上⾯就是有了⼀个 ajax 对象

创建完对象之后我们还需要设置一些信息:

const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', './data.php')

上⾯的代码执⾏完毕以后,本次请求的基本配置信息就写完了

接下来就是把它发送出去啦!

使⽤ ajax 发送请求

ajax的请求有两种方式:get和post:

get

const xhr = new XMLHttpRequest()
// 直接在地址后⾯加⼀个 ?,然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')
xhr.send()

post

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 如果是⽤ ajax 对象发送 post 请求,必须要先设置⼀下请求头中的 contenttype
// 告诉⼀下服务端我给你的是⼀个什么样⼦的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-formurlencoded')
// 请求体直接再 send 的时候写在 () ⾥⾯就⾏
// 不需要问号,直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')

总结:

ajax提供前后台交互的能⼒

是⼀个 默认异步 执⾏机制的功能

GET请求的差数直接拼接在url上面

ajax原理

以上就是有关ajax的一些基础信息啦,如果想更好的学习有关ajax的知识,这里有一份教学视频哦: https://www.bilibili.com/video/av78185809

--逆战班


以上所述就是小编给大家介绍的《ajax原理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

One Click

One Click

Richard L. Brandt / Portfolio Hardcover / 2011-10-27 / 25.95

An insightful look at how Amazon really works and how its founder and CEO makes it happen. Amazon's business model is deceptively simple: make online shopping so easy and convenient that customers ......一起来看看 《One Click》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具