a.什么是Ajax
    Asynchronous JavaScript and XML(异步JavaScript和XML)
    节省用户操作,时间,提高用户体验,减少数据请求
    传输获取数据
b.使用Ajax:
    使用ajax获取某一文本文件的内容
    
c.Ajax过程详解:
    创建对象XMLHttpRequest()
    Date()对象
    ActiveXObject(‘Microsoft.XMLHTTP’)

1.例:
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        //打开浏览器
        var xhr = new XMLHttpRequest();
        //在地址栏输入地址
        xhr.open('get','1.txt',true);
        //提交
        xhr.send();
        //等待服务器返回内容
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }
        }
    }
}
</script>
<body>
    <input type="button" value="按钮" id="btn" />
</body>

2.异常
<script>
    //alert(a);
    try {
        //代码尝试执行这个块中的内容,如果有错误,则会执行catch{},    并且传入错误信息参数
        //alert(a);
        //new throw();
        //throw new Error('错了错了');
    } catch (e) {
        alert(e);
    }
    alert('到这里了');
</script>

3.异步同步
①<script src="jquery.js"></script>
<script>
//$(function(){})    //阻塞 -> 同步
                    //阻塞:当前面一件事没做完的情况下,阻塞后面代码的执行
                
/*setTimeout(function() {
    alert(1);        //非阻塞 - 异步
}, 2000);           //非阻塞:先弹出2,2s后再弹出1
alert(2);*/

4.请求状态监控
                onreadystatechange事件
                readyState属性:请求状态
                0    (初始化)还没有调用open()方法
                1    (载入)已调用send()方法,正在发送请求
                2    (载入完成)send()方法完成,已收到全部响应内容
                3    (解析)正在解析响应内容
                4    (完成)响应内容解析完成,可以在客户端调用了
                status属性:服务器(请求资源)的状态
                返回的内容
                responseText:返回以文本形式存放的内容
                responseXML:返回XML形式的内容

window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
    (一)//打开浏览器
        /*
            1.创建一个ajax对象
                ie6以下new ActiveXObject('Microsoft.XMLHTTP')
        */
        var xhr = null;
        /*if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }*/
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    (二)//在地址栏输入地址
        /*
            open方法
            三个参数含义:
                1.打开方式 Form-method
                2.地址 Form-action
                3.是否异步
                    异步(true):非阻塞--> 前面的代码不会影响后面代码的执行
                    同步(false):阻塞--> 前面的代码会影响后面代码的执行
                    同步与异步区别:同步:当后续的代码需要用到前面东西的时候,可以用到同步,
                                    同步模式用的较少,因为可以通过事件回调的形式进行处理
                                    异步:一般情况下,均使用异步,因为不可能为了完成ajax动作,
                                    而把后续代码全部阻止掉
        
        */   //打开方式:get;地址:1.txt;是否异步:异步-->xhr.open('get','1.txt',true);
        xhr.open('get','1.txt',true);
      (三)//提交 发送请求
        
        //Send方法
            发送数据请求,相当于Form的submit

//alert(1);
        xhr.send();
        
        //alert(1)
        
        //alert( xhr.responseText );
        
     (四)//等待服务器返回内容
            /*
            readyState : ajax工作状态
            responseText(属性) : ajax请求返回的内容就被存放到这个属性下面
            on readystate change : 当状态值readyState改变的时候触发
            status : 服务器状态(码),http状态码
            */
        xhr.onreadystatechange = function() {
            
            if ( xhr.readyState == 4 ) { //当状态值为4时,把内容取出来
                //容错??处理:判断服务器是否成功 2开头的表示成功
                if ( xhr.status == 200 ) {//当状态值OK的时候 执行
                    alert( xhr.responseText );//把内容取出来
                } else {//如果为其他的状态 做一下错误处理,xhr.status:表示错误信息
                    alert('出错了,Err:' + xhr.status);
                }
          }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</script>

传递、请求过程中的问题:
    xhr.open('post','2.post.php',true);
        //post方式,数据放在send()里面作为参数传递
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
        //post没有缓存问题
        //无需编码
    xhr.send('username=刘伟&age=30');
获取内容以后应注意的问题:

4.1,表单
    表单:数据的提交,向服务器提交数据,比如:提交用户信息
        action : 数据提交的地址,默认是当前页面
        method : 数据提交的方式,默认是get方式
            1.get--通过url地址传输
                把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面
                传输的数据量:有限制,url长度限制的原因,我们不要通过get方式传递过多的数据
                传递的数据类型:仅为字符串
            2.post--通过浏览器内部传输
                传输的数据量:理论上无限制
                传递的数据类型:可多种
        enctype : 提交的数据格式,默认application/x-www-form-urlencoded
①<body>
    
    <form action="1.get.php" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

4.2,后端数据接收
    前后台键名和传输方式必须一致
        数据传输方式
        数据获取方式
①后端数据接收--get-$_GET方式 (.php 文件)
               通过URL传递给该脚本的变量的数组
    <?php
        header('content-type:text/html;charset="utf-8"');
        error_reporting(0);

$username = $_GET['username'];
        $age = $_GET['age'];

echo "你的名字:{$username},年龄:{$age}";

②<form action="1.post.php" method="post">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
    
②后端数据接收--post-$_POST 方式 (.php 文件)
               通过HTTP POST方法(表单)传递给该脚本的变量的数组
    <?php
        header('content-type:text/html;charset="utf-8"');
        error_reporting(0);
        //$_REQUEST----get post 都可以
        $username = $_POST['username'];
        $age = $_POST['age'];

echo "你的名字:{$username},年龄:{$age}";

5.json
<script src="JSON.js"></script>
<script>
/*
JSON :
JSON.js文件中有两种方法:
        stringify : 可以把一个对象转成对应字符串
        parse : 可以把字符串转成对应对象
*/
//alert(JSON)
//stringify : 可以把一个对象转成对应字符串

var arr = [1,2,3];
var j = {left:100};
/*alert( JSON.stringify(arr) );*/
/*alert( JSON.stringify(j) );*/

//parse : 可以把字符串转成对应对象
var s1 = '[100,200,300]';
var a1 = JSON.parse(s1);
//alert(a1[0])

var s2 = '{"left":100}';
var a2 = JSON.parse(s2);
alert(a2.left)
</script>

6.ajax就是拿数据,从接口上取数据,把取到的数据根据不同特性,进行处理    
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    //alert( xhr.responseText );
                    var data = JSON.parse( xhr.responseText );//转换
                    
                    var oUl = document.getElementById('ul1');//获取
                    var html = '';//创建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;//添加后放到oUl.innerHTML里
                } else {
                    alert('出错了,Err:' + xhr.status);
                }
                //从接口上取数据,把取到的数据根据不同特性,进行处理
                //ajax就是拿数据
            }
        }
6.get方式两个问题
    /*
        1.缓存 在url?后面连接一个随机数,时间戳
        2.乱码 编码encodeURI
    */            //动态文件
        原:xhr.open('get','1.txt',true);
        改:xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        -->:    + new Date().getTime() 表示后面连接一个随机数,时间戳,可以使数据实时更新
        -->:    '2.get.php?username='+encodeURI('刘伟')+'&age=30&' 将乱码进行URL编码,表示将汉字转为字符串输出

7.post方式四个问题
            1.数据放在那?
            2.发送的数据类型?
        xhr.open('post','2.post.php',true);
        //post方式,数据放在send()里面作为参数传递   setRequestHeader表示设置请求头,告诉后端发送过去的文档类型是什么
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
            3.post没有缓存问题
            4.无需编码
        xhr.send('username=刘伟&age=30');//数据放在send()里面作为参数传递

8.完整案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /*
        
        xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        xhr.send();
        
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出错了,Err:' + xhr.status);
                }
            }    
        }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

ajax详细介绍的更多相关文章

  1. JQuery中的AJAX参数详细介绍

    Jquery中AJAX参数详细介绍 参数名 类型 描述 url String    (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...

  2. ThinkPHP页面跳转、Ajax技巧详细介绍(十八)

    原文:ThinkPHP页面跳转.Ajax技巧详细介绍(十八) ThinkPHP页面跳转.Ajax技巧详细介绍 一.页面跳转 $this->success('查询成功',U('User/test' ...

  3. jquery和ajax的关系详细介绍【转】

    jquery和ajax的关系详细介绍 http://www.jb51.net/article/43965.htm

  4. 柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  5. JavaScript FormData的详细介绍及使用

    本文转自:https://blog.csdn.net/liupeifeng3514/article/details/78988001 FormData的详细介绍及使用请点击此处,那里对FormData ...

  6. js event 冒泡和捕获事件详细介绍【转】

    冒泡和捕获 冒泡: 事件从内向外,从下向上执行 (默认行为) 捕获: 事件从外向内,从上向下执行 vue之capture 捕获事件 capture.html <!DOCTYPE html> ...

  7. 【spring boot】11.spring-data-jpa的详细介绍和复杂使用

    ==================================================================================================== ...

  8. RabbitMQ学习总结(1)——基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  9. Django对中间件的调用思想、csrf中间件详细介绍、Django settings源码剖析、Django的Auth模块

    目录 使用Django对中间件的调用思想完成自己的功能 功能要求 importlib模块介绍 功能的实现 csrf中间件详细介绍 跨站请求伪造 Django csrf中间件 form表单 ajax c ...

随机推荐

  1. FreeCodeCamp练习笔记

    CSS样式表: 嵌套:body是最外层包围其他所有HTML元素(标签),其中的元素样式都可覆盖body的样式. 覆盖:同一元素有多个样式,位置靠后的样式覆盖位置靠前的样式. id:id与位置无关,可任 ...

  2. 搭建XMPP学习环境

    XMPP(Extensible Messaging and Presence Protocol,前称Jabber)是一种以XML为基础的开放式IM协议.xmpp被人熟知,google talk肯定有一 ...

  3. Android中如何控制元素的显示隐藏?

    在Android程序中,有时需要程序开启时默认隐藏某个控件,当单击某个按钮时才触发显示控件的内容.比如在查询员工资料时,提交查询后再显示查询到的表格内容: Android中控制元素的隐藏参考以下代码. ...

  4. DataTable数据检索的性能分析(转寒江独钓)

    我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...

  5. 2013成都网络赛 C We Love MOE Girls(水题)

    We Love MOE Girls Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. 原生JavaScript技巧

    时常在技术论坛有看见一些比较好的示例,于是就出于一种收集并学习的态度,于是就保留下来啦~  当然现在展示的也只是一部分,先放一部分出来尝尝鲜~~~

  7. 微信5.4安卓版重回ios风格 导航菜单都放底栏位置

    微信5.4安卓版发布更新了,由于本人的手机设置软件自动更新,中午的时候才发现微信换成了5.4版本,启动微信后是一个大大的“转账,就是发消息”,进入微信界面有点小惊喜,导航菜单都改为底部tab方式,顶部 ...

  8. CSS-dl+dt+dd的应用(非常实用)

    http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

  9. javascript数据结构-链表

    gihtub博客地址 链表 是一种物理存储单元上非连续.非顺序的存储结构,它既可以表示线性结构,也可以用于表示非线性结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每 ...

  10. java13

    1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...