JavaScript Ajax实现异步通信

最新推荐文章于 2024-04-22 23:57:10 发布

Acmera

最新推荐文章于 2024-04-22 23:57:10 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript ajax 异步 iframe

本文链接：https://blog.csdn.net/chenjiaxiang520/article/details/53639309

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript Ajax实现异步通信

一、浏览器与服务器的同步和异步通信
1.同步：是阻塞的，浏览器在向服务器发送请求之后一直等待服务器的响应，而没有做其他事情。
2.异步：非阻塞的，浏览器向服务器发送请求之后，继续执行其他代码，知道服务器响应，浏览器
中断当前的任务，处理服务器响应。

二、传统页面同步刷新

1.html页面

<form action="../testphp/sync.php" method="get">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

2.php页面

<?php 
header('Content-type:text/html;charset=utf-8');
$username = $_GET['username'];
$password = $_GET['password'];
$flag = 1;
/*将页面跳转到原来页面，flag标志为了告诉前端请求响应的情况*/
header('location:../testhtml/sync.html?flag='.$flag);

 ?>

三、没有Ajax之前浏览器是通过iframe来实现异步刷新

1.iframe标签：iframe标签通过src连接到一个页面，其实就是将需要实现异步刷新的内容使用
iframe标签包裹，

A.对iframe实现整个页面刷新，其实是通过刷新一个页面的子页面来实现异步刷新；

a.主页面代码：

<div>通过实现子页面刷新来实现异步刷新</div>
<iframe src="../testphp/data.php" frameborder="0"></iframe>

b.php页面代码：

<?php
    echo 1;
?>

B.通过在刷新子页面的同时在子页面做一些操作来访问父页面元素并且修改该元素的内容

a.主页面代码：

<div id="refreshTarget"></div>
<form action="../php/data.php" method="post" target="targetIframe">
<input type="submit" value="提交">
</form>
<iframe name="targetIframe" frameborder="0">iframe</iframe>

b.php页面代码：

<?php
    echo 1;
?>
<script type="text/javascript">
    parent.document.querySelector('#refreshTarget').innerHTML = '刷新成功';
</script>

三、Ajax实现异步刷新

1.使用get方法来发送请求：

/**
 * 使用ajax get方式来验证用户名密码是否正确
 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可
 * 以不为表单添加name属性
 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进
 * 行操作，然后对前端返回响应数据，解析数据，刷新
 */
var submit = document.querySelector('#submit');
submit.onclick = function(){
    var nameValue = document.querySelector('#username').value;
    var passValue = document.querySelector('#password').value;
    var target = document.querySelector('#refreshTarget');
    /* 实例化XMLHttpResquest*/
    var xhr = new XMLHttpRequest();

    /* 监控xhr对象的状态,只要xhr.readyState值改变就会触发事件由alert弹出框的值可以知道
        a.以下xhr.readyState值为4的时候表示请求响应结束，数据接收完毕并且可以使用
        b.xhr.status值为200表示请求成功
    */
    xhr.onreadystatechange = function() {
        alert(1);
        if(xhr.readyState == 4) {
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(data == 1) {
                    target.innerHTML = '验证成功';
                }else if(data == 2) {
                    target.innerHTML  = '验证失败';
                }
            }
        }
    }

    /* 配置请求参数，
    设置url的查询字符串的值时候最好进行URI编码比如：encodeURIComponent(nameValue),因为
    在一些浏览器中会出现乱码现象
    */
    var url = '../testphp/inspector.php?username='+nameValue + '&password='+ 
    passValue;

    xhr.open('get',url,true); // xhr.readyState = 1;

    /* 发送请求*/
    xhr.send(null); // xhr.readyState = 2;
    alert(2);
}

2.使用post方法来发送请求：

/**
 * 使用ajax post方式来验证用户名密码是否正确
 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可
 * 以不为表单添加name属性
 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进
 * 行操作，然后对前端返回响应数据，解析数据，刷新
 * 3.区别于ajax,get方法就是数据是放在send发送不是添加到查询字符串
 */
var submit = document.querySelector('#submit');
submit.onclick = function(){
    var nameValue = document.querySelector('#username').value;
    var passValue = document.querySelector('#password').value;
    var target = document.querySelector('#refreshTarget');
    /* 实例化XMLHttpResquest*/
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        alert(1);
        if(xhr.readyState == 4) {
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(data == 1) {
                    target.innerHTML = '验证成功';
                }else if(data == 2) {
                    target.innerHTML  = '验证失败';
                }
            }
        }
    }

    /* 打开请求*/
    var url = '../testphp/inspector.php?';

    xhr.open('post',url,true); // xhr.readyState = 1;

    /* 修改请求头模拟from表单的post提交,
    a.设置Content-type可以使得在php页面中$_POST[‘key’]的方式来获取对应的值，不然的话必
    须在$HTTP_RAW_POST_DATA对象中获取
    b.设置'Content-type'既是使用类似表单方式提交数据，所以一下必须对send发送的数据序列
    化为‘name=name&value=value’的形式*/
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');


    var data = 'username='+nameValue+'&password='+passValue;

    /* 发送请求*/
    xhr.send(data); // xhr.readyState = 2;
}

请求的php页面代码

<?php
/* 设置响应数据的内容格式，和字符集，此时前端的responseXML保存着XML DOM文档*/
header('Content-type:text/html;charset=utf-8');

/*使用表单的post请求php页面中可以通过$_POST来获取*/
$username = $_POST['username'];
$password = $_POST['password'];

if($username == 'admin' && $password == '123'){
    echo 1;
}else{
    echo 2;
}

?>

3、ajax的get和post的区别：

A.get方式：

a.设计初衷是用于向服务器查询数据的，也可以发送数据，服务器返回的数据一般会缓存在浏
览器中，当通过相同的url发送请求时候，请求会被中断，而从浏览器取出缓存的数据；

b.get向服务器传送的数据放在查询字符串中，由于浏览器的地址栏长度有限制，所以只能满
足发送较少量数据；

B.post方式：

A.用于向服务器发送数据，能发送较大的数据量，并且能够发送多种格式的数据，所以一般都
需要在请求头中设置Content-type值指定发送的数据的格式，数据存在请求主体里面，

4、封装原生Ajax：

1.封装函数实现的功能：

    A.可以指定post/get请求方式

    B.当指定post时候可以指定传输数据的格式,

    C.请求成功，和失败都会执行响应函数

function myAjax(param) {
    /*实例化xhr*/
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }else {
        xhr = new activeXObject('Microsoft.XMLHTTP');
    }

    /**
     * 参数属性值默认处理
     * 1.dataType默认json格式数据
     * 2.type默认get方式
     * 3.contentType默认'application/x-www-form-urlencoded'
     * 4.async默认true异步
     */
    var dataType = param.dataType || 'json'; 
    var type = param.type || 'get';
    var contentType = param.contentType || 'application/x-www-form-urlencoded';
    var async = param.async || true;

    /*监听xhr.readyState*/
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var data = dataType == 'json' ? xhr.responseText : xhr.responseXML;
                param.sucess(data);
            }else{
                param.failure(new Error('请求失败'));
            }   
        }
    }

    /**
     * 配置请求参数
     * 1.根据请求方式设置url和send()方法的发送数据sendData
     * 2.对查询字符串进行URI编码encodeURIComponent()
     * 3.对get方式处理缓存不再请求问题
     */
    var url = param.url;
    var sendData; 
    if(type == 'get') {
        url += '?' + formatFormData(param.data);
        sendData = null;
    }else {
        /*表示发送的数据会经过URL编码，发送的是类似查询字符串格式的数据*/
        if (contentType == 'application/x-www-form-urlencoded') {
            sendData = formatFormData(param.data);
        }else if(contentType == 'multipart/form-data') {
        /*表示发送的数据会经过MIME编码,发送的是二进制数据，一般用于文件提交*/

        }else if(contentType == 'application/json') {
            sendData = JSON.stringify(param.data);
        }
    }
    console.log(url);
    xhr.open(type,url,async);


    /*post方式提交设置响应头指定数据传输方式*/
    if(type = 'post') {
        xhr.setRequestHeader('Content-type',contentType);
    }

    /*发送请求*/
    xhr.send(sendData);


    /*函数将一个对象的属性格式化为key=value&key=value形式*/
    function formatFormData(obj) {
        var str = '';
        for(var key in obj) {
            str += '&' + key + '=' + encodeURIComponent(obj[key]);
        }
        return str.substring(1);
    }
}

四、$.ajax()函数：
1.参数是一个对象，对象的常用属性：

A.data：对象，用于保存post方法时候需要传输得数据；

B.url：请求的文件的路径；

C.dataType: 用于指定返回数据的类型，作为jQuery在前端处理服务器返回的字符串的根据;

a.text: 纯文本字符串
b.json: JSON 数据
c.html: 纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行
d.xml：指定返回的数据是xml DOM文档
e.jsonp：格式为callback(data)的字符串;
f.script:纯文本 JavaScript 代码

D.type: 请求的方式，get/post;

E.success: 回调函数，请求成功之后执行

F:error: 在请求失败的时候调用

H.jsonp: 值为jsonp请求时候回调函数的key,用于替换key=callback的key部分

I.jsonpCallback: 值为jsonp请求的回调函数名

五、XML、JSON数据解析

1、XML数据解析：

A.XML和HTML的区别（参考一些书籍和网上的一些描述）：

a.XML（Extensible Markup Language）：可扩展标记语言，设计用于描述数据，必须是双标签

b.HTML(Hyper Text Markup Language)：超文本标记语言，设计用于显示数据，可以是单标签

B.web开发中浏览器请求服务器中的XML文件，服务器会返回响应数据XML的DOM文档，在前端使用DOM操作来解析该文档，比如：

a.XML DOM文档

<china>
    <province>
        <name>广东<name>
    </province>
</china>

b.假定data值是以上XML DOM文档对象，解析获取name的值：“广东”

var name = data.getELementsByTagName('name')[0];
var targetText ; 
if(name.textContent) {
    targetText = name.textContent; // 标准浏览器
}else {
    targetText = name.text; // IE
}

2、JSON数据解析

A.JSON相比XML来说在一定大小的情况下能保存更多的数据，解析也方便，直接使用键来访问就可
以，比较简单。

B.在ajax请求时，在php中使用echo返回的是一个JSON字符串，前端要解析时需要先转化为JSON对
象。

a.JSON.parse(JsonString)：将JSON字符串转化为JSON对象

b.JSON.stringify(Json)：将JSON对象转化为JSON字符串

C.后端返回的JOSN字符串可以通过eval()函数转化为JSON对象,作为eval函数的返回值；eval()
函数可计算某个字符串，并执行其中的的 JavaScript 代码。

a.var json = eval(JsonString),

b.eval()函数因为安全性问题现在使用的比较少