分享web开发知识

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

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

原生Ajax XMLHttpRequest对象

发布时间:2023-09-06 02:21责任编辑:顾先生关键词:Ajax
一、Ajax请求


- 现在常见的前后端分离项目中,一般都是服务器返回静态页面后
浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求
获取数据,然后调用回调函数,将数据添加到页面上 

 

1.1 JQuery封装后的ajax请求


 

- 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 

 1 jQuery.get(...) 2 ????????????????所有参数: 3 ?????????????????????url: 待载入页面的URL地址 4 ????????????????????data: 待发送 Key/value 参数。 5 ?????????????????success: 载入成功时回调函数。 6 ????????????????dataType: 返回内容格式,xml, json, ?script, text, html 7 ?8 ?9 ????????????jQuery.post(...)10 ????????????????所有参数:11 ?????????????????????url: 待载入页面的URL地址12 ????????????????????data: 待发送 Key/value 参数13 ?????????????????success: 载入成功时回调函数14 ????????????????dataType: 返回内容格式,xml, json, ?script, text, html15 16 17 ????????????jQuery.getJSON(...)18 ????????????????所有参数:19 ?????????????????????url: 待载入页面的URL地址20 ????????????????????data: 待发送 Key/value 参数。21 ?????????????????success: 载入成功时回调函数。22 23 24 ????????????jQuery.getScript(...)25 ????????????????所有参数:26 ?????????????????????url: 待载入页面的URL地址27 ????????????????????data: 待发送 Key/value 参数。28 ?????????????????success: 载入成功时回调函数。29 30 31 ????????????jQuery.ajax(...)32 33 ????????????????部分参数:34 35 ????????????????????????url:请求地址36 ???????????????????????type:请求方式,GET、POST(1.9.0之后用method)37 ????????????????????headers:请求头38 ???????????????????????data:要发送的数据39 ????????????????contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")40 ??????????????????????async:是否异步41 ????????????????????timeout:设置请求超时时间(毫秒)42 43 ?????????????????beforeSend:发送请求前执行的函数(全局)44 ???????????????????complete:完成之后执行的回调函数(全局)45 ????????????????????success:成功之后执行的回调函数(全局)46 ??????????????????????error:失败之后执行的回调函数(全局)47 ????????????????48 49 ????????????????????accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型50 ???????????????????dataType:将服务器端返回的数据转换成指定类型51 ???????????????????????????????????"xml": 将服务器端返回的内容转换成xml格式52 ??????????????????????????????????"text": 将服务器端返回的内容转换成普通文本格式53 ??????????????????????????????????"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。54 ????????????????????????????????"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式55 ??????????????????????????????????"json": 将服务器端返回的内容转换成相应的JavaScript对象56 ?????????????????????????????????"jsonp": JSONP 格式57 ??????????????????????????????????????????使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数58 59 ??????????????????????????????????如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string60 61 ?????????????????converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数62 ?????????????????????????$.ajax({63 ??????????????????????????????accepts: {64 ????????????????????????????????mycustomtype: ‘application/x-some-custom-type‘65 ??????????????????????????????},66 ??????????????????????????????67 ??????????????????????????????// Expect a `mycustomtype` back from server68 ??????????????????????????????dataType: ‘mycustomtype‘69 70 ??????????????????????????????// Instructions for how to deserialize a `mycustomtype`71 ??????????????????????????????converters: {72 ????????????????????????????????‘text mycustomtype‘: function(result) {73 ??????????????????????????????????// Do Stuff74 ??????????????????????????????????return newresult;75 ????????????????????????????????}76 ??????????????????????????????},77 ????????????????????????????});
查看代码

 

1.2.2 一个简单的Ajax请求


 

原生Ajax XMLHttpRequest对象

原文地址:https://www.cnblogs.com/shiqi17/p/9906145.html

知识推荐

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