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. Robots.txt - 禁止爬虫(转)

    Robots.txt - 禁止爬虫 robots.txt用于禁止网络爬虫访问网站指定目录.robots.txt的格式采用面向行的语法:空行.注释行(以#打头).规则行.规则行的格式为:Field: v ...

  2. 简单的STM32 汇编程序—闪烁LED

    要移植操作系统,汇编是道不得不跨过去的坎.所以承接上篇的思路,我准备用汇编写一个简单的闪烁LED灯的程式.以此练习汇编,为操作系统做准备. 第一步,还是和上篇一样,建立一个空的文件夹. 第二步,因为是 ...

  3. go智能提示(重要)

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  4. 简单的方向传感器SimpleOrientationSensor

    SimpleOrientationSensor是一个简单的方向传感器.能够识别手机如下表的6种方向信息: SimpleOrientation枚举变量 方向 NotRotated 设备未旋转 Rotat ...

  5. 在Heroku部署时,无法加载 css,js,图片资源解决办法

    解决方案: 首先查看Gemfile, 确保group :production do 里添加了 gem "rails_12factor", '0.0.2' 然后在本地执行 rails ...

  6. STM32F103之DMA

    一.背景: 需要使用STM32的DAC,例程代码中用了DMA,对DMA之前没有实际操作过,也很早就想知道DMA到底是什么,因此,看了一下午手册,代码和网上的资料,便有了此篇文章,做个记录. 二.正文: ...

  7. U盘安装Windows 7 + Ubuntu 14 双系统笔记

    第一个系统是Windows 7系统,现在采用U盘安装 Ubuntu 14,实现双系统,主要会用到3个软件: 1.DiskGenius - 磁盘修复.分区.调整分区工具,点击下载: 用这个工具先腾出一个 ...

  8. HDU 5023 A Corrupt Mayor's Performance Art 线段树区间更新+状态压缩

    Link:  http://acm.hdu.edu.cn/showproblem.php?pid=5023 #include <cstdio> #include <cstring&g ...

  9. composer 安装提示 PHP Warning: readfile(): SSL operation failed with code 1

    这是php设置openssl 没有指定cacert.pem (证书) 第一步:下载 cacert.pem 文件下载地址 https://curl.haxx.se/docs/caextract.html ...

  10. rabbitmq 简单梳理

    概念: 生产者(Producer,简写P),负责发布消息. “交换机”(Exchange, 简写X), 负责中转消息. 路由(Route, 简写R), 即 X->Q的路线名. 消息队列 (Que ...