ajax在js中和jQuery中的用法实例详解_javascript技巧
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）,现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
目录
原生 JS怎么发送一个 get 请求怎么发送一个 post 请求发送一个带有参数的 get 请求发送一个带有参数的 post 请求jQuery$.get 几个参数，怎么使用$.post 几个参数，怎么使用$.ajax 几个参数，怎么使用JSONP$.ajax 怎么发送 jaonp 请求总结
原生 JS
怎么发送一个 get 请求
创建一个 ajax 对象
var xhr = new XMLHttpRequest()
设置请求方式和请求地址[，是否异步]
xhr.open(\’get\’, \’/ajax\'[, true or fasle])
准备接受请求体
xhr.onload = function () { console.log(xhr.responseText) }
xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
发送请求
xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open(\’get\’, \’/ajax\’)
xhr.onload = function () {
console.log(xhr.responseText)
}
xhr.send(null)
怎么发送一个 post 请求
创建一个 ajax 对象
var xhr = new XMLHttpRequest()
设置请求方式和请求地址[，是否异步]
xhr.open(\’post\’, \’/ajax\'[, true or fasle])
准备接受请求体
xhr.onload = function () { console.log(xhr.responseText) }
xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
发送请求
xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open(\’post\’, \’/ajax\’)
xhr.onload = function () {
console.log(xhr.responseText)
}
xhr.send(null)
发送一个带有参数的 get 请求
var xhr = new XMLHttpRequest
直接在请求地址后面拼接参数，? 开始，key=value 的形式，多个参数之间以 & 分割
xhr.open(\’get\’, \’/ajax?name=Jack&age=18\’)
xhr.onload = function () { console.log( xhr.responseText ) }
xhr.send()
发送一个带有参数的 post 请求
var xhr = new XMLHttpRequest
不需要在请求地址后面拼接任何内容
xhr.open(\’post\’, \’/ajax\’)
xhr.onload = function () { console.log( xhr.responseText ) }
post 方式携带参数是直接写在 xhr.send() 后面的 () 里面
自己收集数据 key=value
自己设置请求头
xhr.setRequestHeadr(\’content-type\’, \’application/x-www-form-urlencoded\’)
FormData 收集数据
什么都不需要，只要使用 FormData 收集数据就可以了
var fd = new FormData(DOM)
在发送请求的时候只要把 fd 带过去就行了
var xhr = new XMLHttpRequest()
xhr.open(\’post\’, \’/ajax\’)
xhr.onload = function () {
console.log(xhr.responseText)
}
xhr.setRequestHeadr(\’content-type\’, \’application/x-www-form-urlencoded\’)
xhr.send(\’key=value&key=value\’)
var fd = new FormData(document.querySelector(\’form\’))
var xhr = new XMLHttpRequest()
xhr.open(\’post\’, \’/ajax\’)
xhr.onload = function () {
console.log(xhr.responseText)
}
xhr.send(fd)
jQuery
$.get 几个参数，怎么使用
地址
参数 key=value 或者 { name: \’Jack\’ }
成功的回调函数
预期后台返回的数据类型
text ： 什么都不做，直接给你结果
json ： 必定会执行一步 JSON.parse()
$.post 几个参数，怎么使用
地址
参数 key=value 或者 { name: \’Jack\’ }， 不能发送 FormData
成功的回调函数
预期后台返回的数据类型
$.ajax 几个参数，怎么使用
就是配置项 options
url： 请求地址
method/type: 请求方式
data： 携带参数
dataType： 后台返回的数据类型天
success： 成功的回掉
error： 失败的回调
contentType: 发送 FormData 的时候使用的
processData： 发送 FormData 的时候使用的
JSONP
$.ajax 怎么发送 jaonp 请求
dataType 必须是 jsonp
方式必须是 get
jsonp： 根据后台来决定
$.ajax({
url: \’/jsonp\’,
data: {},
dataType: \’jsonp\’,
jsonp: \’callback\’,
success (res) {
console.log(res)
}
})
总结
到此这篇关于ajax在js中和jQuery中的用法的文章就介绍到这了,更多相关ajax在js中和jQuery的用法内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
