分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

AJAX

发布时间:2023-09-06 02:06责任编辑:彭小芳关键词:暂无标签

内容:

1.什么是AJAX

2.如何使用AJAX

1.什么是AJAX

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

AJAX = Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求

AJAX 是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。

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

2.如何使用AJAX

用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象:

 1 // GET 2 // 创建 AJAX 对象 3 var r = new XMLHttpRequest() 4 // 设置请求方法和请求地址 5 r.open(‘GET‘, ‘/login‘, true) 6 // 注册响应函数 7 r.onreadystatechange = function() { 8 ????console.log(‘state change: ‘, r) 9 }10 // 发送请求11 r.send()12 13 14 // POST15 // 创建 AJAX 对象16 var r = new XMLHttpRequest()17 // 设置请求方法和请求地址18 r.open(‘POST‘, ‘/login‘, true)19 // 设置发送的数据的格式20 r.setRequestHeader(‘Content-Type‘, ‘application/json‘)21 // 注册响应函数22 r.onreadystatechange = function() {23 ????if (r.readyState === 4) {24 ????????console.log(‘state change: ‘, r, r.status, r.response)25 ????????// 转换格式26 ????????var response = JSON.parse(r.response)27 ????????console.log(‘response‘, response)28 ????} else {29 ????????console.log(‘change‘)30 ????}31 }32 // 发送请求33 var account = {34 ????username: ‘gua‘,35 ????password: ‘123‘,36 }37 var data = JSON.stringify(account)38 r.send(data)

当然我们也可以把上述过程封装一下:

1 var ajax = function(method, path, data, responseCallback) {2 ????// method是请求方法(GET or POST) path是请求路径 3 ????// data是发送的数据(对象类型) responseCallback是响应函数4 5 6 }

AJAX

原文地址:https://www.cnblogs.com/wyb666/p/9387488.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved