一、基礎知識點

1.ajax可以做事情：局部刷新 瀏覽器搜索列表記錄 加載更多的數據

2.登錄頁面同步網絡請求：頁面全部刷新，用戶量大體驗很不好

3.ajax的詳解：ajax的get和post請求 同步還是異步，true為異步

ajax.open("get","login.php","true")

二、ajax的get和post請求

2.1 get和post請求

ajax的get異步請求

window.onload = function () {

var btn = document.getElementById('btn');

btn.onclick = function () {

//第一步

var ajax = null;

if(window.XMLHttpRequest){//標準瀏覽器

ajax = new XMLHttpRequest();

}else{//早期瀏覽器

ajax = new ActiveXObject('Microsoft.XMLHTTP');

}

var username = document.getElementById('username').value;

var password = document.getElementById('password').value;

//第二步

var geturl = 'open.php?username='+username+'&password='+password;

`post請求加入********`

//var posturl = 'open.php';

//ajax.open('post',posturl,true);

ajax.open('get',geturl,true); //第三步

`post請求加入********`

//ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

//var postParam = 'username='+username+'&password='+password;

//ajax.send(postParam);

ajax.send(null);

//第四步

ajax.onreadystatechange = function () {

if(ajax.readyState == 4){

if(ajax.state == 200){

var data = ajax.responseText;

console.log(data);

}

}

}

}

}

用戶名:
密碼:

2.2get和post請求區別

***get請求的拼接參數設置

var geturl = 'open.php?username='+username+'&password='+password;

ajax.open('get',geturl,true);

ajax.send(null);

***post請求的參數設置

var posturl = 'open.php';

ajax.open('post',posturl,true);

ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var postParam = 'username='+username+'&password='+password;

ajax.send(postParam);

2.3后臺的返回數據

//后臺的數據

$username = $_GET['username'];

$password = $_GET['password'];

$username = $_POST['username'];

$password = $_POST['password'];

//返回的數據echo '用戶名:'.$username.'密碼:'.$password;

>

三、xml數據解析

3.1數據亂碼的解決

var geturl = 'open.php?username='+username+'&password='+password;

變為

var geturl = 'open.php?username='+encodeURIComponent(username)+'&password='+password;

亂碼一般是因為出現的中文數據。只需要將中文的數據的前面添加encodeURIComponent進行轉碼即可。

3.2xml數據解析

張

3

< xing/>

< xing >

李

4

數據解析

var data = ajax.responseText;

var bs = data.getElementsByTagName('xings')[0];

console.log(bs);

var xins = bs.getElementsByTagName('xing');

var tag = '';

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

var xing = xins[i];

var name = xing.getElementsByTagName('name')[0];

var desc = xing.getElementsByTagName('desc')[0];

tag += '

'+getNodeText(name)+''+getNodeText(desc)+',';

}

//展示數據

var tags = document.createElement('tags');

tags.innerHTML = tag;

四、json數據(標準的數據結構類型)解析

json的對象和json的字符串的區別

//json字符串

var str = '{"name":"三國","des":"文學"}';

//將字符串－>json的對象

var data = JSON.parse(str);

//將json的對象－>json字符串

var s = JSON.stringify(data);

//輸出的內容為:{"name":"三國","des":"文學"}

console.log(str);

//輸出的內容為:文學

console.log(data.des);

//輸出的內容為:Object {name: "三國", des: "文學"}

console.log(data);

//輸出的內容為:{"name":"三國","des":"文學"}

console.log(s);

4.1 JSON解析的實例講解

json數據結構

數據實例解析.png

效果圖

屏幕快照 2016-07-21 上午10.28.06.png

代碼解析

快遞

#divcss{

background-color: cornflowerblue;

width: 200px;

height: 200px;

position: relative;

margin-top: 100px;

margin-left: 400px;

}

window.onload = function () {

var btn = document.getElementById('btn');

btn.onclick = function () {

var code = document.getElementById('textfield').value;

//網絡請求＊＊＊＊＊＊＊

var ajax = null;

ajax = new XMLHttpRequest();

var url = "https://www.baidu.com";

ajax.open('get',url,true);

ajax.send(nil);

ajax.onreadystatechange = function () {

if(ajax.status == 200&&ajax.readyState == 4){

alert("請求成功");

var data = JSON.parse(ajax.responseText);

if(data.status == 0){

var list = data.data.info.context;

var tag = "";

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

//獲取model中的數據

var item = list[i];

var time = item.time;

var desc = item.desc;

var t = new Date();

t.setTime(time+'000');

var str = t.getFullYear()+'年'+(t.getMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?'下午':'上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds();

tag += '

'+str+''+desc+'';

}

var ul = document.createElement('ul');

ul.innerHTML = tag;

document.getElementById('divcss').appendChild(ul); }

}

};

};

var ul = document.createElement('ul');

ul.innerHTML = "無數據內容";

document.getElementById('divcss').appendChild(ul);

alert(3);

}

總結

以上是生活随笔為你收集整理的html5 ajax数据显示,html5的ajax学习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。