分享web开发知识

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

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

Ajax

发布时间:2023-09-06 01:52责任编辑:赖小花关键词:Ajax

壹:与XMLHttpRequest绑定的,js原生的方式


 示例:

<!DOCTYPE html><html> ?<head> ???<script src="../build/react.js"></script> ???<script src="../build/react-dom.js"></script> ???<script src="../build/browser.min.js"></script> ?</head> ?<body> ???<div id="example" /> ???<script type="text/babel"> ???????var text = "loading"; ???????var Result = React.createClass({ ???????????getInitialState: function () { ???????????????return { ?????????????????success:false ???????????????}; ???????????}, ???????????componentDidMount: function() { ???????????????var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 ???????????????request.onreadystatechange = function () { // 状态发生变化时,函数被回调 ???????????????????if (request.readyState === 4) { // 成功完成 ???????????????????????// 判断响应结果: ???????????????????????if (request.status === 200) { ???????????????????????????// 成功,通过responseText拿到响应的文本: ???????????????????????????text = request.responseText; ???????????????????????????this.setState({success:true}); ???????????????????????} else { ???????????????????????????// 失败,根据响应码判断失败原因: ???????????????????????????text = ‘failed‘; ???????????????????????????this.setState({success:false}); ???????????????????????} ???????????????????} else { ???????????????????????// HTTP请求还在继续... ???????????????????} ???????????????}.bind(this); ???????????????????????????????request.open(‘GET‘, ‘https://api.github.com/search/repositories?q=javascript&sort=stars‘); ???????????????request.send(); ???????????}, ???????????render: function() { ???????????????return ( ?????????????????<div> ???????????????????{text} ?????????????????</div> ???????????????); ???????????} ???????}); ???????????????ReactDOM.render( ?????????<Result/>, ?????????document.getElementById(‘example‘) ???????); ???????????</script> ?</body>

贰:Promise


 示例:

new Promise(function (resolve, reject) { ???console.log(‘start new Promise...‘); ???var timeOut = Math.random() * 2; ???console.log(‘set timeout to: ‘ + timeOut + ‘ seconds.‘); ???setTimeout(function () { ???????if (timeOut < 1) { ???????????console.log(‘call resolve()...‘); ???????????resolve(‘200 OK‘); ???????} ???????else { ???????????console.log(‘call reject()...‘); ???????????reject(‘timeout in ‘ + timeOut + ‘ seconds.‘); ???????} ???}, timeOut * 1000);}).then(function (r) { ???console.log(‘Done: ‘ + r);}).catch(function (reason) { ???console.log(‘Failed: ‘ + reason);});

Ajax

原文地址:https://www.cnblogs.com/heben/p/8991600.html

知识推荐

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