亲宝软件园·资讯

展开

ajax原理

木木520 人气:0
**大家好,今天来和大家谈谈有关ajax的一些事情。要想更好的使用ajax,首先我们要对ajax原理有一定的了解,接下来就带大家一起熟悉一下ajax原理。** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308185828446.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM4NDk5MQ==,size_16,color_FFFFFF,t_70) #### ajax的概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 ***也就是说ajax是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具接。下面我们来说一下使用ajax的一些好处。*** #### AJAX 的优势 1. 不需要插件的⽀持,原⽣ js 就可以使⽤ 2. ⽤户体验好(不需要刷新⻚⾯就可以更新数据) 3. 减轻服务端和带宽的负担 ajax既然这么好用,那它有什么缺点吗?当然有,ajax的缺点就是: 搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308185757714.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM4NDk5MQ==,size_16,color_FFFFFF,t_70) **了解了有关ajax的信息之后,就来尝试创建一个ajax对象吧!** #### AJAX 的使⽤ 在 js 中有内置的构造函数来创建 ajax 对象 创建 ajax 对象以后,我们就使⽤ ajax 对象的⽅法去发送请求和接受响应 创建⼀个 ajax 对象 ```handlebars // IE9及以上 const xhr = new XMLHttpRequest() // IE9以下 const xhr = new ActiveXObject('Mricosoft.XMLHTTP') ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308185731147.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM4NDk5MQ==,size_16,color_FFFFFF,t_70) *上⾯就是有了⼀个 ajax 对象 我们就可以使⽤这个 xhr 对象来发送 ajax 请求了* **创建完对象之后我们还需要设置一些信息:** ```handlebars const xhr = new XMLHttpRequest() // xhr 对象中的 open ⽅法是来配置请求信息的 // 第⼀个参数是本次请求的请求⽅式 get / post / put / ... // 第⼆个参数是本次请求的 url // 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步 // xhr.open('请求⽅式', '请求地址', 是否异步) xhr.open('get', '.https://img.qb5200.com/download-x/data.php') ``` 上⾯的代码执⾏完毕以后,本次请求的基本配置信息就写完了 接下来就是把它发送出去啦! #### 使⽤ ajax 发送请求 ajax的请求有两种方式:get和post: ###### get ```handlebars const xhr = new XMLHttpRequest() // 直接在地址后⾯加⼀个 ?,然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', '.https://img.qb5200.com/download-x/data.php?a=100&b=200') xhr.send() ``` ###### post ```handlebars const xhr = new XMLHttpRequest() xhr.open('get', '.https://img.qb5200.com/download-x/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上面 POST请求的参数就不是放在url了** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200308190048236.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM4NDk5MQ==,size_16,color_FFFFFF,t_70) 以上就是有关ajax的一些基础信息啦,如果想更好的学习有关ajax的知识,这里有一份教学视频哦:https://www.bilibili.com/video/av78185809 > --逆战班

加载全部内容

相关教程
猜你喜欢
用户评论