AJAX教程

一.get与post的区别：

1.get：

1.>get提交时，将数据显示到url中,安全性较低；
2.>url对于提交的数据大小有限制，一般是几十个汉字，不适合提交大量数据；

2.post：

1.>数据不会显示在url中，安全性较高；
2.>可以发送大量数据，尤其是文件上传必须用post；

二.简介：

1.作用：

在无刷新无提交的情况下，实现页面的局部加载；

2.定义：

AJAX=异步Javascript和XML;
AJAX是一种用于创建快速动态网页的技术；

3.使用AJAX的应用程序案例：

新浪微博，Goole地图，开心网等等；

4.举例：

1-xhr.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">发送ajax请求</button>
        <script>
            btn.onclick=function(){
                alert(111);
//              1.声明一个xhr对象;
                var xhr=new XMLHttpRequest();
//              2.监听xhr状态的改变
                xhr.onreadystatechange=function(){
                    console.log(xhr.readyState+'xhr就绪状态');//=4成功
                    //4个值 1，2，3，4
                    console.log(xhr.status+'响应状态');//=200
                    console.log(xhr.responseText+'响应消息主体');
                }
                //3.打开web服务器的链接
                xhr.open('get','1_xhr.php',true);//true代表是否为异步请求
                //4.发送请求消息主体（发送数据）
                xhr.send(null);
            }
        </script>
    </body>
</html>

1-xhr.php:

<?php
    //响应头部
    header('Content-Type:text/plain');
    for($i=0;$i<=10;$i++){
        echo $i.'hello';
    }

5.XMLHttpRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新；

6.向服务器发送请求，使用XMLHttpRequest对象的open（）和send（）方法；

eg：xhr.open('get','1-xhr.php',true);//open方法中的async参数必须设置为true； 
       xhr.send（）；

序号	方法	描述
1	open（method，url，async）	规定请求的类型，url以及是否异步处理请求	method：请求的类型：get或post； url：文件在服务器上的位置；async： true（异步）或false（同步）；
2	send方法 send（string）	将请求发送到服务器，仅用于post请求

7.通过AJAX，Javascript无需等待服务器的响应，而是：

1.>在等待服务器响应时执行其他脚本；
2.>当响应就绪后对响应进行处理；

8.AJAX-服务器响应

若需获得来自服务器的响应，需使用XMLHttpRequest对象的responseText或responseXML；
1.>responseText 获得字符串形式的响应数据；
2.>responseXML 获得xml形式的响应数据；

9.XMLHttpRequest对象的三个重要属性：

属性	描述
onreadystatechange	存储函数，每当readystate属性改变时，就会调用该函数；
readystate	存有XMLHttpRequest的状态，从0-4发生变化；0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪；
status	200“OK” 404 未找到页面

10.常用header汇总：

header（‘Content-type:text/html;charset=utf8’）;//设置页面内容是html，编码格式是utf-8；
header (‘Content-type:text/plain’);//纯文本格式；
header (‘Content-type:img/jpeg’);//JPG,JPEG;
header (‘Content-type:application/zip’);//zip文件；
header (‘Content-type:application/pdf’);//pdf文件；
header (‘Content-type:audio/mpeg’);//音频文件；
header (‘Content-type:text/css’);//css文件；
header (‘Content-type:text/javascript’);//js文件；
header (‘Content-type:text/xml’);//xml;
header (‘Content-type:application/x-show**e-flash’);//flash动画；

三.使用get方式发送ajax请求：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">发送ajax请求</button>
        <script>
            btn.onclick=function(){
                alert(111);
//              1.声明一个xhr对象;
                var xhr=new XMLHttpRequest();
//              2.监听xhr状态的改变
                xhr.onreadystatechange=function(){
                    console.log(xhr.readyState+'xhr就绪状态');//=4成功
                    //4个值 1，2，3，4
                    console.log(xhr.status+'响应状态');//=200
                    console.log(xhr.responseText+'响应消息主体');
                }
                //3.打开web服务器的链接
                xhr.open('get','1_xhr.php',true);//true代表是否为异步请求
                //4.发送请求消息主体（发送数据）
                xhr.send(null);
            }
        </script>
    </body>
</html>

四.使用post方式发送ajax请求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
//      1.创建一个xhr对象
        var xhr=new XMLHttpRequest();
//      2.监听xhr状态的改变
        xhr.onreadystatechange=function(){
            
        }
//      3.打开一个链接
        xhr.open('post','jd.php',true);
//      4.修改请求消息头部
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//      5.发送数据
        xhr.send(null);
        </script>
    </body>
</html>

最后编辑于：2018.11.13 08:39:06