前言
在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴;你说你会制作网页,好吧,只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力,并不会为你进行加分;
我们都明白,要想提高竞争力,提高自己的技能是十灰重要的。前后台的数据交互就是一个很好的加分项。今天,就带大家一起了解一下web前端实现数据交互的几种方式;
一、Ajax
作为一个前端程序猿,对于各种JS框架和各种库肯定不陌生。原生js的ajax以及jQuery的ajax都是十分常用的数据交互的方式;
1.1 原生JS的Ajax
大家可能对原生JS比较陌生,毕竟相对于jQuery的ajax,原生的确实有些复杂,不够jQuery的ajax是由原生的ajax封装而来。由此可见了解原生的ajax是十分必要的;
首先,要了解异步的javascript和xml,核心对象为XMLHttpRequest.
接下啦,给大家介绍XMLHttpRequest中的属性与方法:
XMLHttpRequest属性:
二、XMLHttpRequest方法:
接下来,把栗子中的步骤整理一下:
第一步:获得XMLHttpRequest对象;
var ajax = new XMLHttpRequest();
第二步:设置状态监听函数
ajax.onreadystatechange = function(){
}
第三步:open一个请求:
其中,第一个参数为传递方式:get/post;
第二个参数:请求数据的url地址;
第三个参数:true/false。true表示异步请求。false表示同步请求
ajax.open("GET","h5.json",true);
第四步:send一个请求。可以发送对象和字符串,不需要传递数据发送null;
ajax.send(null);
第五步,在监听函数中,判断readyState==4 && status == 200表示请求成功;
if (ajax.readyState == 4 && ajax.status == 200) {
}
第六步,使用ajax.responseText、ajax.responseXML接收响应数据,并使用原生js操作DOM进行显示;
console.log(JSON.parse(ajax.responseText));
直接上栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//第一步:获得XMLHttpRequest对象
var ajax = new XMLHttpRequest();
//第二步:设置状态监听函数
ajax.onreadystatechange = function(){
//console.log(ajax.readyState);
//console.log(ajax.status);
//第五步,在监听函数中,判断readyState==4 && status == 200表示请求成功;
if (ajax.readyState == 4 && ajax.status == 200) {
//第六步,使用ajax.responseText、ajax.responseXML接收响应数据,并使用原生js操作DOM进行显示
//console.log(ajax.responseText);
//console.log(ajax.responseXML);//返回不是XMl,显示null
console.log(JSON.parse(ajax.responseText));
//console.log(eval("("+ajax.responseText+")"));
}
}
//第三步:open一个请求
ajax.open("GET","h5.json",true); //true表示异步请求。false表示同步请求
//第四步:send一个请求。可以发送对象和字符串,不需要传递数据发送null;
ajax.send(null);
var str = "alert('111')";
eval(str);
eval("alert('111')");
var json1 = "{'name':'zhangsan'}";
console.log(eval("("+json1+")"));
</script>
</head>
<body>
</body>
</html>
json:
[
{
"name": "zhangsan",
"age": 17,
"hobby": [
"吃",
"喝",
"玩",
"乐"
],
"score":{
"math":78,
"chinese":89
}
},
{
"name": "zhangsan",
"age": 17,
"hobby": [
"吃",
"喝",
"玩",
"乐"
],
"score":{
"math":78,
"chinese":89