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. js实现文本框中内容的放大显示

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Java多线程编程核心技术---学习分享

    继承Thread类实现多线程 public class MyThread extends Thread { @Override public void run() { super.run(); Sys ...

  3. IBatis 2.x 和 MyBatis 3.0.x 的区别(从 iBatis 到 MyBatis)

    从 iBatis 到 MyBatis,你准备好了吗? 对于从事 Java EE 的开发人员来说,iBatis 是一个再熟悉不过的持久层框架了,在 Hibernate.JPA 这样的一站式对象 / 关系 ...

  4. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  5. golang笔记——流程控制

    条件语句 if ... else if ... else 语句,如: { fmt.Println(">100") } < num { fmt.Println(" ...

  6. cf723c Polycarp at the Radio

    Polycarp is a music editor at the radio station. He received a playlist for tomorrow, that can be re ...

  7. hashicorp/consul

    https://github.com/hashicorp/consul/tree/master/vendor/github.com/boltdb/bolt

  8. 创建maven工程时总是带有后缀名Maven Webapp解决办法

    做项目时突然遇到了一个新问题,从前没有的,今天不知怎么了突然有了这个问题,maven创建web项目时多出了后缀名maven webapp ,很碍眼,而且访问路径还得删了,这个后缀名才可访问,所以找了答 ...

  9. 【Android学习】Windows下Android环境搭建

    一.  JDK下载配置 直接百度,很简单. 二.android JDK下载配置 1.进入下载官网(需要FQ):https://developer.android.com/studio/index.ht ...

  10. 计算 TP90TP99TP...

    what-do-we-mean-by-top-percentile-or-tp-based-latency tp90 is a minimum time under which 90% of requ ...