AJAX 基本内容1

最新推荐文章于 2022-04-14 20:53:02 发布

weixin_34060741

最新推荐文章于 2022-04-14 20:53:02 发布

阅读量70

点赞数

文章标签： javascript python php ViewUI

原文链接：https://my.oschina.net/swmhxhs/blog/719578

版权

2019独角兽企业重金招聘Python工程师标准>>>

AJAX Day01 基本内容

基本内容
1.同步交互与异步交互
    1.1同步交互
    客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).
   
    1.2异步交互
    客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)
2.AJAX
    2.1Asynchronous JavaScript and Xml
    直译中文 - javascript和XML的异步
    (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax
    Ajax实现的是B/S架构下的异步交互
    
    2.2实现异步交互的技术
 
        同步与异步的区别
        2.2.1同步交互
            执行速度相对比较慢
            响应的是完整的HTML页面
        2.2.2异步交互
            执行速度相对比较快
            响应的是部分数据
3.Ajax具有核心对象
        3.1XMLHttpRequest对象

        创建XMLHttpRequest对象

function getXhr(){
    // 声明XMLHttpRequest对象
    var xhr = null;
    // 根据浏览器的不同情况进行创建
    if(window.XMLHttpRequest){
    // 表示除IE外的其他浏览器
    xhr = new XMLHttpRequest();
    }else{
    // 表示IE浏览器
    xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
    }
    // 创建核心对象
    var xhr = getXhr();

  
4.Ajax的核心对象
        4.1属性
            readyState
            status
        4.2方法
            open() - 与服务器端建立连接
            send() - 向服务器端发送请求
        4.3事件
            onreadystatechange事件
        作用 - 监听服务器端的通信状态改变
        
5.实现Ajax的异步交互步骤
    5.1创建XMLHttpRequest核心对象
        固定写法 getXhr()函数
      5.2与服务器端建立连接
        5.2.1使用XMLHttpRequest对象的open(method,url)方法
            method - 设置当前请求的类型
            url - 设置当前请求的地址
        5.2.2向服务器端发送请求
            使用XMLHttpRequest对象的send(请求参数)方法
            请求参数的格式 - key=value
        5.2.3接收服务器端的响应数据
            使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
            
          使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
            
          使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
                
          使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
        5.2.4GET与POST的区别
            GET请求类型
            send()方法不起作用,但是不能被省略
            xhr.send(null);
            请求参数 - 添加到URL?key=value
       5.2.5POST请求类型
            send()方法起作用
            在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AJAX基础练习</title>
</head>
<body>
<div id="content" style="width: 400px;font-size: 32px;background: #21add1;"></div>
<input type="button" value="异步请求练习" id="btn"/>
<script>
    document.getElementById("btn").onclick = function () {
        /*1.获得XMLHttpRequest对象，在下方实现getXhr函数*/
        var xhr = getXhr();
        /*2.与服务器建立连接
         * open(method,url,async)方法
         * *method-设置当前的请求方式 GET OR POST；
         * *url-设置当前的请求地址
         * *async-设置是否异步 boolean类型
         *       默认值是true 表示异步
         *       官方认为使用XMLHttpRequest对象就是为了实现异步交互的
         * */
        xhr.open("GET", "test1.php?user=zhangwuji");
        /*3.客户端向服务器发送请求
         * send(请求参数) 方法
         * 请求参数的格式为  key=value;
         * 如果请求类型为GET
         *  send()方法是不能向服务器 发送请求数据的
         *
         *   ！！！send（）方法不能被被省略的，
         *      GET请求类似 send(null);
         * */
        xhr.send(null);
        /*4.客户端接收服务器的响应
         * 使用 onreadystatechange事件
         * 监听服务器通讯状态
         * readyState属性
         * 得到服务器端当前通信状态
         * 0 未初始化
         * 1正在接收
         * 2接收完成
         * 3正在响应
         * 4响应完成
         * status 状态码
         * 200 OK
         *
         * responseText属性  （报文）
         * 接收服务器端的数据 （html格式）
         * */
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var data=xhr.responseText;
                document.getElementById("content").innerHTML=data;
            }
        }

    };


    function getXhr() {
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest;
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }
</script>
</body>
</html>

转载于:https://my.oschina.net/swmhxhs/blog/719578