ajax清请求过程,JS深入基础之Ajax的请求过程

Ajax的请求过程

1.创建XMLHttpResquest实例对象

2.Resquest.open(),三个参数分别是(method，url，async)

3.可以按需求来设置request.setRequestHeader来设置请求头

3.如果Resquest.open()的async参数是true(默认是true)，那么就要定义事件监听器onreadystatechange,

他可以在事件监听器的函数内以检测request.readyState请求状态，request.status响应状态码，request.getResponseHeader('Content-Type')查找Content-Type头来验证响应主体是不是期望的类型。如果都通过callback返回request.responseText

4.如果Resquest.opne()的第三个参数async的值是false，那么表示就是同步的，就不需要事件处理程序了，不用设置request.onreadystatechange。

5.Request.send()，如果是post，里面要设置一个string来放置post的参数，get则不用。

下面来分别写一个post和get的例子

// 异步post

function postExp(url,msg,callback){

var request = new XMLHttpRequest()

request.open('post',url)

request.setRequestHeader('Content-type','text/plain;charseUTF-8')

request.onreadystatechange = (()=>{

if(request.readyState === 4 && request.status === 200){

callback('成功')

}else{

callback('失败了')

}

})

request.send(msg)

}

// 异步get

function getExp(url,callback){

var request = new XMLHttpRequest()

request.open('get',url)

request.onreadystatechange = (()=>{

// 请求结束并且成功

if(request.readyState === 4 && request.status === 200) {

var type = request.getResponseHeader('Content-type')

if(type.indexOf('xml') != -1 && request.responseXML){

callback(request.responseXML)

}else if (type == 'aplication/json'){

callback(JSON.parse(request.responseText))

}else {

callback(request.responseText)

}

})

request.send(null)

}

复制代码

ajax清请求过程,JS深入基础之Ajax的请求过程相关推荐

Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
js文件中发送ajax请求,ulr路径不起作用的解决办法
前言: 在写Python项目的时候,单独的js文件发送ajax请求,并不起效果并且提示路径错误错误原因分析: {% url 'myadmin_updategoodsgrade' %} # 是模板中的 ...
js源码模仿 jquery的ajax的获取数据（get，post ）的请求封装
function ajax(obj){ // 默认参数 var defaults = { type : 'get',data : {}, url : '#', dataType : 'text', a ...
如何在js中使用ajax请求数据,在 JS 中怎么使用 Ajax 来进行请求
在 JS 中怎么使用 Ajax 来进行请求发布时间:2021-07-22 09:48:43 来源:亿速云阅读:78 作者:chen 本篇内容介绍了"在 JS 中怎么使用 Ajax 来进行 ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
js样式会影响ajax,js ajax同步请求造成浏览器假死的问题
今天写了一个简单的loading效果,希望在点击加载按钮后会出现loading字样,然后执行ajax同步请求,加载完之后loading样式消失,本来是很简单的需求,结果遇上了很尴尬的问题~ 问题:当我 ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
Python|SQL详解之DDL|DML|DQL|DCL|索引|视图、函数和过程|JSON类型|窗口函数|接入MySQL|清屏|正则表达式|executemany|语言基础50课：学习（14）
文章目录系列目录原项目地址第41课:SQL详解之DDL 建库建表删除表和修改表第42课:SQL详解之DML insert操作 delete 操作 update 操作完整的数据第43课:S ...

ajax清请求过程,JS深入基础之Ajax的请求过程

ajax清请求过程,JS深入基础之Ajax的请求过程相关推荐

最新文章

热门文章