React实战－javascript访问服务端数据大全

骑猪看日落 2022-07-13 02:29 42阅读 0赞

React作为新的前端的开发框架，确切的说只是前端页面库。然而在整个前端应用中，数据控制，数据模型、访问服务端则具有很大的灵活性，这也是Reactjs与Angular的主要不同点之一。在数据控制和数据模型方面，主流的是采用Redux，而在服务器访问方面则没有哪个成为主流方式，你可以自己写调用方法，也可以采用第三方JS库，通常有以下几种方法（weixinhao: react-javascript）：

*  通过XMLHttpRequest对象进行访问

XMLHttpRequest对象自身就带有访问服务端端功能,在ie老版本中为ActiveXObject，含有open，send, onreadystatechange等方法，分别负责定义请求，发送请求，获取返回值等功能。如：

var xhttp;

xhttp=new XMLHttpRequest();

xhttp.onreadystatechange = function() \{

if (this.readyState == 4 && this.status == 200) \{

cFunction(this);

\};

xhttp.open("GET", url, true);

xhttp.send();

*  通过Jquery对象进行访问

Jquery是至今运用最为广泛的js库了，它提供了丰富的服务端访问方法。调用和设置也不复杂，主要通过$.ajax进行方法。如：$.post(...)

.done(function (data) \{

//...

\}).fail(function (jqXHR, status, error) \{

console.log(jqXHR.responseText);

\});

*  Angular访问方式

由于Angular是完整的前端框架，控制和访问也提供了完整的方式，如：

angular.module('cfd', \[\])

.factory('StudentService', \['$http', function ($http) \{

var path = 'data/people/students.json';

var students = \[\];

/\* In the real app, instead of just updating the students array

\* (which will be probably already done from the controller)

\* this method should send the student data to the server \*/

var save = function (student) \{

if (student.id === null) \{

students.push(student);

\} else \{

for (var i = 0; i < students.length; i++) \{

if (students\[i\].id === student.id) \{

students\[i\] = student;

break;

\};

/\* Populate the students array with students from the server \*/

$http.get(path).success(function (data) \{

data.forEach(function (student) \{

students.push(student);

\});

return \{

students: students,

save:     save

\};

\}\])

*  Fetch访问方式

Fetch提供了一个全局的简便的访问http异步请求的方式。如：

ar myHeaders = new Headers();

var myInit = \{ method: 'GET',

headers: myHeaders,

mode: 'cors',

cache: 'default' \};

var myRequest = new Request('flowers.jpg', myInit);

fetch(myRequest)

.then(function(response) \{

return response.blob();

\})

.then(function(myBlob) \{

var objectURL = URL.createObjectURL(myBlob);

myImage.src = objectURL;

\});

*  SuperAgent访问方式

SuperAgent提供了简单的访问服务端方式，主要针对http，https的Ajax访问，简单精炼的方法满足了普通应用访问服务端端各类常见访问方式，包括数据包头，包体的设置，get、put、post和delete的操作，文本与文件的传递等，学习曲线极低，强烈推荐，官网说明：https://visionmedia.github.io/superagent/\#test-documentation。如：

request

.post('/api/pet')

.send(\{ name: 'Manny', species: 'cat' \})

.set('X-API-Key', 'foobar')

.set('Accept', 'application/json')

.end(function(err, res)\{

if (err || !res.ok) \{

alert('Oh no! error');

\} else \{

alert('yay got ' + JSON.stringify(res.body));

\});

*  其他方式