位置: 编程技术 - 正文
推荐整理分享原生JS实现ajax与ajax的跨域请求实例(实现原生的ajax),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:原生js实现ajax步骤,js原生ajax步骤,原生js实现promise.all,原生js写ajax实现,原生js实现promise.all,原生js使用axios,如何使用原生js实现ajax请求,原生js与jquery,内容如对您有帮助,希望把文章链接给更多的朋友!
一、原生JS实现ajax
第一步获得XMLHttpRequest对象
第二步:设置状态监听函数
第三步:open一个连接,true是异步请求
第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null
第五步:在监听函数中,判断readyState=4&&status=表示请求成功
第六步:使用responseText、responseXML接受响应数据,并使用原生JS操作DOM进行显示
二、ajax的跨域请求
[跨域请求处理]由于在JS中存在同源策略。当请求不同协议名,不同端口号,不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
1、后台PHP进行设置:
前台无需任何设置,在后台被请求的PHP文件中,写入一条header。
2、使用src属性+JSONP实现跨域
①拥有src属性的标签自带跨域功能!所以可以使用script标签的src属性请求后台数据
②由于src在加载数据成功后,后直接将加载内容放入到script标签中
所以,后台直接返回JSON字符串将不能在script标签中解析
因此,后台应该返回给前台一个回到函数名,并将JSON字符串作为参数传入
后台PHP文件中返回:
③前台接收到返回的回到函数,将直接在script标签中调用。因此需要声明这样一个回调函数,作为请求成功的回调。
3、JQuery的ajax实现JSONP
① 在ajax请求时,设置dataType为"json"
② 后套返回时,依然需要返回回调函数。但是,ajax在发送请求时会默认使用get请求将回到函数名发给后台,后台可以使用$_GET['callback']取出回调函数名:
③后台返回以后,ajax依然可以用success作为成功的回调函数:
当然后台也可以随便返回一个回调函数名。
前台只要请求成功,就会自动调用这个函数。类似于第2条的②③步
以上这篇原生JS实现ajax与ajax的跨域请求实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。
微信小程序实现鼠标拖动效果示例 本文实例讲述了微信小程序实现鼠标拖动效果。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml文件viewclass="view"style="left:{{left}}px;to
利用babel将es6语法转es5的简单示例 前言Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否
react-navigation 如何判断用户是否登录跳转到登录页的方法 本文介绍了react-navigation如何判断用户是否登录跳转到登录页的方法,分享给大家,也给自己留个笔记,具体如下:新建一个index.jsimportReact,{Component}from'r
标签: 实现原生的ajax
本文链接地址:https://www.jiuchutong.com/biancheng/373309.html 转载请保留说明!友情链接: 武汉网站建设