javascript - XMLHttpRequest is not working on react native app - Stack Overflow

admin管理员组

文章数量:1401360

I am using XMLHttpRequest api for requesting resources from server in react native android app Here is my app code (client side)

import React,{Component} from 'react';
import {Text,View,StyleSheet,TouchableOpacity} from 'react-native';
class Home extends Component
{
  state={con:''}

show=()=>
{
    alert("show function called");
    var req=new XMLHttpRequest();
    req.onreadystatechange=(e)=>
    {
        if(req.status==200 && req.readyState==4)
        {
            alert(req.responseText);
        }
    }
    req.open("GET","http://localhost:3000/show_react");
    req.send();
}

render()
{
    return(
    <View style={styles.container}>
    <TouchableOpacity onPress={()=>this.show()} style={styles.box}><Text>Click</Text></TouchableOpacity>
    <Text>{this.state.con}</Text>
    </View>
    );
}
}  
  export default Home;

const styles=StyleSheet.create({
box:
{
    padding:10,
    width:200,
    marginTop:10,
    backgroundColor:'rgba(215, 44, 149, 0.7)',
    alignItems:'center'
},
container:
{
    flexDirection:'row',
    justifyContent:'center'
}
});

And below is my simple node.js code (Server side) for accepting request from the client

app.get("/show_react",function(req,res){
console.log("show_react called");
res.send("hii react");
});

The above server side code runs successfully when it is requested by the browser but it doesn't works when requested by the client (react native app). Any answer is appreciated.

I am using XMLHttpRequest api for requesting resources from server in react native android app Here is my app code (client side)

import React,{Component} from 'react';
import {Text,View,StyleSheet,TouchableOpacity} from 'react-native';
class Home extends Component
{
  state={con:''}

show=()=>
{
    alert("show function called");
    var req=new XMLHttpRequest();
    req.onreadystatechange=(e)=>
    {
        if(req.status==200 && req.readyState==4)
        {
            alert(req.responseText);
        }
    }
    req.open("GET","http://localhost:3000/show_react");
    req.send();
}

render()
{
    return(
    <View style={styles.container}>
    <TouchableOpacity onPress={()=>this.show()} style={styles.box}><Text>Click</Text></TouchableOpacity>
    <Text>{this.state.con}</Text>
    </View>
    );
}
}  
  export default Home;

const styles=StyleSheet.create({
box:
{
    padding:10,
    width:200,
    marginTop:10,
    backgroundColor:'rgba(215, 44, 149, 0.7)',
    alignItems:'center'
},
container:
{
    flexDirection:'row',
    justifyContent:'center'
}
});

And below is my simple node.js code (Server side) for accepting request from the client

app.get("/show_react",function(req,res){
console.log("show_react called");
res.send("hii react");
});

The above server side code runs successfully when it is requested by the browser but it doesn't works when requested by the client (react native app). Any answer is appreciated.

• javascript
• android
• node.js
• react-native
• xmlhttprequest

Share Improve this question Follow asked Jan 4, 2018 at 18:17 Rohit KumarRohit Kumar 44622 gold badges66 silver badges1616 bronze badges 8

• Why not use fetch? It's a much more friendly API that's supported in React Native. – Andrew Li Commented Jan 4, 2018 at 18:20
• 1 But XMLHttpRequest api is much easier to learn. All of the syntax is similar to pure javascript XMLHttp request – Rohit Kumar Commented Jan 4, 2018 at 18:26
• 2 fetch is a part a Web API just like XMLHttpRequest and is JavaScript, I don't understand your statement about "syntax similar to pure javascript". fetch itself also has more capabilities and is supported by React Native, unlike XMLHttpRequest. And IMO it's not easier to learn. Instead of your 8-10 lines of code with XMLHttpRequest, you can do it in 3 lines with fetch. – Andrew Li Commented Jan 4, 2018 at 18:28
• 1 facebook.github.io/react-native/docs/network.html – Andrew Li Commented Jan 4, 2018 at 18:31
• XMLHttpRequest is supported by React Native. Your code does not seem to have issues, could you elaborate on how it does not work, what do you receive, any errors etc? Also, could you check with another server, just to make sure that issue is about XMLHttpRequest? – Tukan Commented Jan 5, 2018 at 17:41

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

Okay... In client side i have just created a button. When the button is touched , show function is called. This show function will create a new XMLHttpRequest (localhost:3000/show_react) to the localhost server running at port 3000.

If your request URL in the react native application is really localhost:3000/show_react then your problem is that localhost points to your local device (i.e. smartphone). The URL needs to be accessible from the device where you run your react native application. Try to browse to the URL in the Safari browser on your device (i.e. smartphone)

In order to use Fetch, you must use a drop in React-Native replacement for Fetch; Fetch's API in react-native is a wrapper around XMLHttpRequest. I use react-native-blob-util as it uses NativeModules to implement fetch.

I did work tracking down why my XMLHttpRequest is broken for me and I did not find out why. I did find that instead of something like xhr.onload, I could do xhr.addEventListener('load', ()...) it would work. May be helpful for future seekers

本文标签： javascriptXMLHttpRequest is not working on react native appStack Overflow