React native中使用XMLHttpRequest请求数据

一、代码

 import React, { Component } from 'react';

 import {

     AppRegistry,

     StyleSheet,

     Text,

     View

 } from 'react-native';

 //默认应用的容器组件

 export default class App extends Component {

     //构造函数

     constructor(props) {

         super(props);

         this.state = {

             responseText: null

         };

     }

     //渲染

     render() {

         return (

             <View style={styles.container}>

                 <Text style={styles.item} onPress={this.doXMLHttpRequest.bind(this)}>获取数据</Text>

                 <Text>{this.state.responseText}</Text>

             </View>

         );

     }

     //使用XMLHttpRequest请求数据

     doXMLHttpRequest(){

         var request = new XMLHttpRequest();

         request.onreadystatechange = (e) => {

             if (request.readyState !== 4) {

                 return;

             }

             if (request.status === 200) {

                 alert("请求成功！");

                 this.setState({responseText: request.responseText})

                 console.log(request.responseText);

             } else {

                 alert("请求失败！");

             }

         };

         request.open('GET', 'https://httpbin.org/get');

         request.send();

     }

 }

 //样式定义

 const styles = StyleSheet.create({

     container:{

         flex: 1,

         marginTop:25

     },

     item:{

         margin:15,

         height:30,

         borderWidth:1,

         padding:6,

         borderColor:'#ddd',

         textAlign:'center'

     },

 });

二、效果图

React native中使用XMLHttpRequest请求数据的更多相关文章

React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
在React Native中,使用fetch网络请求实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考问题及解决方法一模一样,不再重 ...
React Native中的远程调试是不可靠的
一.原因当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受C ...
在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
react native 中的ListView
ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...

随机推荐

Parallel并行编程初步
Parallel并行编程可以让我们使用极致的使用CPU.并行编程与多线程编程不同,多线程编程无论怎样开启线程,也是在同一个CPU上切换时间片.而并行编程则是多CPU核心同时工作.耗时的CPU计算操作选 ...
廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式
拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...
jquery使用淘宝接口跨域查询手机号码归属地实例
<h1>手机号码归属地查询</h1> <div class="outer"> <p>请输入手机号码</p& ...
ueditor在使用requirejs时，报ZeroClipboard undefined错误
再网上找到了 http://blog.csdn.net/xundh/article/details/44536665 这样一篇文章, 其中原因说的很明白了是因为在有requirejs时, ...
SQL集合运算参考及案例(二)：树形节点数量逐级累计汇总
问题描述: 我们经常遇到这样一个问题,类似于面对一个树形结构的物料数据,需要将库存中每一种物料数量汇总到物料上展示出来:或者说组织机构是一棵树,我们需要统计每一个节点上的人员数量(含下级节点的累计数量 ...
[置顶] android 与JavaScript的互相调用
1.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...
Sublime Text 皮肤插件安装
安装皮肤, 举例sodahttps://github.com/buymeasoda/soda-themectrl+shift+p => Package Control: Install Pack ...
C# html转mht
项目中引入cdosys.dll组件,位置: C:\Windows\System32\cdosys.dll CDO.ADODB 这些类都来自于cdosys.dll组件 /// <summary& ...
Python中strip()、lstrip()、rstrip()用法详解
Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括\n.\r.\t.' ',即:换行.回车.制表符.空格)lstrip:用来去除开头字符.空白符 ...
ejabberd开发和部署
ejabberd开发和部署 (金庆的专栏 2016.10) 搭建了自己的ejabberd集群,然后少量更改源码,实现定制的XMPP服务器. 从github fork ejabberd 库,定为 mas ...