Ajax

最新推荐文章于 2015-10-04 14:39:30 发布
最新推荐文章于 2015-10-04 14:39:30 发布
阅读量383 收藏 2
点赞数
分类专栏： web前端学习 ajax JS 文章标签： ajax 异步 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012999771/article/details/48829757
版权
web前端学习 同时被 3 个专栏收录
40 篇文章 0 订阅
订阅专栏
JS
20 篇文章 0 订阅
订阅专栏
ajax
1 篇文章 0 订阅
订阅专栏

异步的JavaScript和XML

Ajax对象的创建

实现程序:

var oBtn = document.getElementById('bt');
oBtn.noclick = function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get','1.txt',true);
    xhr.send();

    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        alert(xhr.responseText);
    }
 }

浏览器兼容ajax对象

在ie6中不支持XMLHttpRequest对象的使用，所以考虑兼容问题

方法一：判断是否支持Ajax对象

方法一：判断是否支持Ajax对象而你采取不同方式
var oBtn = document.getElementById('bt');
oBtn.noclick = function(){
/*
1.创建一个Ajax对象
    ie6以下new ActiveXObject('Microsoft.XMLHTTP');
*/
    var xhr = null;
    if(window.XMLHttpRequest){//判断是否支持Ajax对象
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.open('get','1.txt',true);
    xhr.send();

    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        alert(xhr.responseText);
    }
 }

方法二：采取异常机制try catch

var oBtn = document.getElementById('bt');
oBtn.noclick = function(){
/*
1.创建一个Ajax对象
    ie6以下new ActiveXObject('Microsoft.XMLHTTP');
*/
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.open('get','1.txt',true);
    xhr.send();

    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        alert(xhr.responseText);
    }
 }

open()方法和表单

表单

表单：数据的提交
    action : 数据提交的地址，默认是当前页面
    method : 数据提交的方式，默认是get方式
        1.get
            把数据名称和数据值用=号连接。多个数据用&串联。数据是显示传送到后台的
            url长度限制的原因，我们不要通过get方式传递过长的数据
        2.post
            理论上长度无限制，可以修改。
    enctype:数据提交的格式，默认格式为applicatiom/x-www-form-urlencoded

代码：
<body>
    <form action="1.get.php" method="get">
        <input  type="text" name="username"/>
        <input type="submit" value="提交" />
    </form>
</body>

open( )

open(para1,para2,para3)
para1:发送方式
para2:请求资源文件
para3:同步和异步模式
同步：阻塞模式
异步：非阻塞模式

等待服务器返回

请求状态监控

readyState : ajax工作状态
responseText: ajax请求返回的内容
readystatechange:对于服务器状态的监听，当readyState状态只发生改变是触发
**容错处理**
XMLHttpRequst.status:服务器状态，http状态码，比如404，102等等

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){//容错处理
            alert(xhr.responseText);
        }else{
            alert("出错了");
        }
    }
}

数据的传递JSON

客户端：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_demo1</title>
</head>
<body>

<input id="Bt" type="button" value="按钮" />
<ul id="ul1"></ul>


<script type="text/javascript">
    window.onload = function(){

        var oBtn = document.getElementById('Bt');
        oBtn.onclick = function(){

            var  xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            xhr.open('get','getNews.php',true);
            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        //alert(xhr.responseText);
                        //接受JSON数据并处理
                        var data = JSON.parse(xhr.responseText);
                        var oUl = document.getElementById('ul1');
                        var html = '';

                        for (var i=0; i<data.length; i++) {
                            html +='<li><a href="#">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
                        }
                        oUl.innerHTML = html;
                    }else{
                        alert("出错了ERR" + xhr.status);
                    }

                }
            }
        }
    }

</script>   
</body>
</html>


注意：ie7及以下的IE浏览器不支持JSON对象，需要到官网下载文件以便是ie7以下的浏览器支持JSON对象。
服务器端：
这里写代码<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$news = array(
    array('title'=>'上海10月8日起调整出租车运价 起租价调为','date'=>'2014'),
    array('title'=>'德国收紧巴尔干难民法律 加强边境管制','date'=>'2015'),
    array('title'=>'中国逮捕两名日本间谍嫌疑人 或判死刑','date'=>'2014'),
    array('title'=>'泪目！学生时代最后悔没做的22件事','date'=>'2014'),
    array('title'=>'庞贝古城木乃伊接受CT扫描 死前惊恐表情曝光','date'=>'2014'),
    array('title'=>'南京虐童案养母被判刑6个月(图)','date'=>'2014'),


);
echo json_encode($news);//以JSON对象返回

以下代码运行成功，实现每秒自动刷新数据显示

json.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_demo1</title>
    <script src="./ajax.js" type="text/javascript"></script>
</head>
<body>

<input id="Bt" type="button" value="按钮" />
<ul id="ul1"></ul>


<script type="text/javascript">
    window.onload = function(){

        var oBtn = document.getElementById('Bt');
        oBtn.onclick = function(){

            ajax('get','getNews.php','',function(data){
                    var data = JSON.parse(data);
                    var oUl = document.getElementById('ul1');
                    var html = '';

                    for (var i=0; i<data.length; i++) {
                        html +='<li><a href="#">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
                    }
                    oUl.innerHTML = html;
            });

            setInterval(function(){
                ajax('get','getNews.php','',function(data){
                        var data = JSON.parse(data);
                        var oUl = document.getElementById('ul1');
                        var html = '';

                        for (var i=0; i<data.length; i++) {
                            html +='<li><a href="#">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
                        }
                        oUl.innerHTML = html;
                    });

            },1000)
        }
    }

</script>   
</body>
</html>
ajax.js


function ajax(method, url, data, success){

    var  xhr = null;
    //浏览器是否支持XMLHttpRequest对象
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
//请求方式的不同,传参方式的不同
            if(method == 'get' && data){
                url += '?' + data;
            }

            xhr.open(method,url,true);
            if(method == 'get'){
                xhr.send();

            }else{
                xhr.setRequestHeader('content-type','applicatiom/x-www-form-urlencoded');
                xhr.send(data);
            }

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        //判断是否传入函数，并执行回调success函数
                        success && success(xhr.responseText);
                    }else{
                        alert("出错了ERR" + xhr.status);
                    }

                }
            }
}


getNews.php


<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$news = array(
    array('title'=>' 起租价调为df ','date'=>'2014'),
    array('title'=>'德国收紧巴尔干难民法律 加强边境管制','date'=>'2015'),
    array('title'=>'中国逮捕两名日本间谍嫌疑人 或判死刑','date'=>'2014'),
    array('title'=>'泪目！最后悔没做的22件事','date'=>'2014'),
    array('title'=>'庞贝古城木乃伊接受CT扫描 死前惊恐表情曝光','date'=>'2014'),
    array('title'=>'南京虐童案养母被判刑6个月(图)','date'=>'2014'),


);
echo json_encode($news);//以JSON对象返回
什么石头
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
AJAXCALL
10-31
AJAXCALL
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
动画animation
u012999771的专栏
09-16 419
动画确定产生动画效果的帧名 - animation-name 定义关键帧名 - animation-name：<single-animation-name> [',' <single-animation-name>]* <single-animation-name> = none | <ID
Date
u012999771的专栏
09-21 392
表示当前时间//当前时间 new Date(); //设定具体时间 2014年12月5日 new Date(2014,11,5);//注意JS里面月份是从0开始计数的。所以这里11就是12月份。创建日期new Date(); new Date(year,month[,day[,minutes[,seconds[,milliseconds]]]]);//最少传year month两个参数，day默认0
数组
u012999771的专栏
09-21 376
创建数组创建数组有两种方式方式1：关键字形式 var array = new Array(); 方式2：字面量形式 var array = [];//常用 var array = [1,2,3,"hell"]; 数组中的元素类型可以不同 var students = [ {id:1, score:80}, {id:2, score:46}, {id:3, socre:36}
js基础学习笔记
u012999771的专栏
10-04 310
引用 <script src=""></script>-不能有margin-left----->marginLeft border-top ------> borderTop .........给元素动态添加class名 增加相应样式给元素动态添加class名 //在js中class是保留字，所以不能使用elem.class = 'name'; //要使用className elem.classN
布局
u012999771的专栏
09-15 305
position—设置定位方式 top, right, bottom, left, z-index—设置元素位置 如果定位元素没有设置宽高，使用top right left等会拉伸元素 z-index:元素在z轴的位置，默认值为0； z-index栈： positionrelative相对定 元素仍然在文档流中 元素参照物为元素本身原来的位置 最常用场景：改变层级和绝对定位元素的参照物 absolu
数值
u012999771的专栏
09-20 304
数值方法取绝对值 Math.abs(x);取绝对值 Math.abs(5);//5 Math.abs(-5);//5 四舍五入 Math.round(x); Math.round(1.1);//1向上取整 Math.ceil(x); Math.ceil(1.1);//2 Math.ceil(1.9);//2 向下取整 Math.floor(x); Math.floor(1.1);//1 Math.f
对象
u012999771的专栏
09-20 299
创建对象var car = new Object(); var car = {};//字面量创建 属性和方法var car ={ color:"red", run:function(){alert("num")} } car.color;//"red" car.run();//alert("run") car["color"];//"red" car["run"]();//aler
变形
u012999771的专栏
09-15 296
transform transform:none | <transform-function>+ transform:none; transform:<transform-function> 例如：<body style="transform:rotate(180deg)"> 表示body元素顺时针旋转180度 <transform-function>代表功能性属性值，作为一种方法标题 方法
基本类型
u012999771的专栏
09-20 287
基本类型Number整数类型 var num = 10; var num = 070;//56 var num = 0xff; Float浮点数类型 var num = 3.1416; var num = 3.12e2;//312特殊值 - NaN(Not a Number) - Infinity var num = 1/0 ;//Infinity; String类型 var name = "
运算符与表达式
u012999771的专栏
09-20 286
相等操作符var num = "4"; num == 4;//true 在做相等操作符是会做类型转换 0 == false;//true，因为是false进行转换为0； 2 == true;//false,因为true进行转换为2； “” == 0；//true，空字符串会转换为0；逻辑操作符 var flag = true; alert(!flag);//false 两个！！可以取到操作数的布尔值
选择器
u012999771的专栏
09-25 285
属性选择器-[att]<from action=""> <div> <input disabled type="text" value="张三" /> </div> <div> <input type="password" placeholser="请输入密码" /> </div> </from> <!--from是block元素，in
JS调试
u012999771的专栏
09-20 269
chorm的js调试打开调试工具快捷键 F12或者ctrl+shirft+i 或者右键审查元素 js调试器source下的文件区域： source面板中可以打开console面板快捷键“Esc” 查找特定文件ctrl+o 查找函数：ctrl+shirft+o
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值