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原理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

A Project Guide to UX Design

A Project Guide to UX Design

Russ Unger、Carolyn Chandler / New Riders Press / 2009-3-23 / USD 39.99

"If you are a young designer entering or contemplating entering the UX field this is a canonical book. If you are an organization that really needs to start grokking UX this book is also for you. " -......一起来看看 《A Project Guide to UX Design》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器