当前位置:首页 > 资讯 > info5 > 正文

[JS]笔记17_AJAX1基本过程(多种适用情况)

发表于: 2016-11-07   作者:express_yourself   来源:转载   浏览:
摘要: 注:所有ajax请求必须在服务器环境下运行1、请求服务器端的txt格式的数据html代码: ajax1-txt 请求数据 vartxt=document.getElementById('txt');varbtn=document.getElementById('btn');btn.onclick=function(){//1、创建XMLHttpRequest对象varxhr=null;

注:所有ajax请求必须在服务器环境下运行

1、请求服务器端的txt格式的数据

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax1-txt</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="txt"></h1>
<script> var txt=document.getElementById('txt'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 var xhr=null;//对象类型 if (window.XMLHttpRequest) {//非IE5 6 xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test01.txt',true)//常用异步--true //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 alert('4'); if (xhr.status==200) {//OK-->表示响应已就绪 alert('400'); txt.innerHTML=xhr.responseText; }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>
<!-- 1、请求服务器端的txt格式的数据 -->

txt格式的数据:

louloloolooooo

2、请求服务器端的json对象

json是以文本即字符串的形式传递的,而JS操作的是JSON对象
JSON字符串->json对象 

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax2-json对象</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test02.json?_='+new Date().getTime(),true)//常用异步--true //?后跟发送给服务器的数据--->生成不一样的url-->解决缓存问题 //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 var json=JSON.parse(xhr.responseText);//解析成json对象 for (var i = 0; i < json.name.length; i++) { list.innerHTML+='<li>姓名:'+json.name[i]+', 性别:'+json.sex[i]+', 年龄:'+json.age[i]+' ,成绩:'+json.scroe[i]+'</li>'; } }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>

json对象格式的数据:

{
    "name":["小喽","安静","老二","佳佳"],
    "sex":["女","女","男","男"],
    "age":[19,23,34,21],
    "scroe":[100,77,33,90] }

[JS]笔记17_AJAX1基本过程(多种适用情况)_第1张图片

3、请求服务器端的json数组

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax3-json数组</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test03.json?_='+new Date().getTime(),true)//常用异步--true //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 var json=JSON.parse(xhr.responseText);//解析成json对象 for (var i = 0; i < json.length; i++) { list.innerHTML+='<li>姓名:'+json[i].name+', 性别:'+json[i].sex+', 年龄:'+json[i].age+' ,成绩:'+json[i].scroe+'</li>'; } }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>

json数组格式的数据:

[
    {"name":"小喽","sex":"女","age":"19","scroe":"99"},
    {"name":"老二","sex":"男","age":"23","scroe":"77"},
    {"name":"安静","sex":"女","age":"24","scroe":"90"},
    {"name":"佳佳","sex":"男","age":"20","scroe":"45"}
]

4、请求服务器端的XML格式

获取标签元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax4-XML</title>
</head>
<body>
<button id="btn">请求数据</button>
<ul id="list"></ul>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test04.xml?_='+new Date().getTime(),true)//常用异步--true //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 var xmlDoc=xhr.responseXML;//responseXML 获得 XML 形式的响应数据 var names=xmlDoc.getElementsByTagName('name'); var sexs=xmlDoc.getElementsByTagName('sex'); var ages=xmlDoc.getElementsByTagName('age'); var score=xmlDoc.getElementsByTagName('score'); console.log(names); for (var i = 0; i < names.length; i++) { list.innerHTML+='<li>姓名:'+names[i].innerHTML+', 性别:'+sexs[i].innerHTML+', 年龄:'+ages[i].innerHTML+', 成绩:'+score[i].innerHTML+'</li>'; } }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>

XML格式的数据:

<persons>
    <person>
        <name>老王</name>
        <sex></sex>
        <age>19</age>
        <score>66</score>
    </person>
    <person>
        <name>老刘</name>
        <sex></sex>
        <age>23</age>
        <score>75</score>
    </person>
    <person>
        <name>老李</name>
        <sex></sex>
        <age>24</age>
        <score>88</score>
    </person>
    <person>
        <name>老张</name>
        <sex></sex>
        <age>31</age>
        <score>94</score>
    </person>
</persons>

[JS]笔记17_AJAX1基本过程(多种适用情况)_第2张图片

5、请求服务器端PHP格式数据

返回字符串->需要解析
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax5-PHP</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test05.php?_='+new Date().getTime(),true)//常用异步--true //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 var json=JSON.parse(xhr.responseText);//解析成json对象 list.innerHTML=json.name; }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>

XML格式的数据:

<?php $str='{"name":"小喽","sex":"女","age":19,"score":66}'; echo $str; ?>

6、请求服务器端PHP格式数据

返回字符串->不需要解析
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax5-PHP2</title>
</head>
<body>
<input type="text" name="" value="" id="ipt">
<button id="btn">请求数据</button>
<h1 id="txt"></h1>
<script> var txt=document.getElementById('txt'); var btn=document.getElementById('btn'); var ipt=document.getElementById('ipt'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test06.php?age='+ipt.value+'&_='+new Date().getTime(),true)//常用异步--true //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 txt.innerHTML=xhr.responseText; }else{ alert(xhr.status); }; }; }; } </script>
</body>
</html>

XML格式的数据:

<?php $str=$_GET['age']; switch($str){ case '21': echo '小喽'; break; case '22': echo '小雪'; break; case '23': echo '佳佳'; break; case '24': echo '迪迪'; break; default: echo "小妖精"; break; } ?>

这里写图片描述

[JS]笔记17_AJAX1基本过程(多种适用情况)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一.各种容器的特性 vector 典型的序列容器,C++标准严格要求次容器的实现内存必须是连续的,唯一可
原文:http://hsw625728.blog.163.com/blog/static/3957072820091116114655254/ <p style="line-
WPF中的ItemsControl定义了ItemContainerStyle这一属性,顾名思义,该属性用来给ItemsControl中包含
右键菜单网上大把,有些很复杂,功能也很丰富,看了半天也看不懂,哎,我们这种菜鸟也只适合几十行
web.xml spring-mvc.xml <mvc:annotation-driven /> <context:component-scan base-packag
LinearLayout 应用在所放置的组件完全在一条直线上,要么是横向的要么是纵向的。 组件和组件之间没
今天白白继续跟大家分享一下cocos2dx添加文本信息的方法。 cocos2dx中有三个类可以添加文本信息:CC
今天白白继续跟大家分享一下cocos2dx添加文本信息的方法。 cocos2dx中有三个类可以添加文本信息:CC
测试多种js在一个页面的兼容性 <!DOCTYPE html> <html lang="en"> <head> <ti
一、真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号