ajax方式

黄酱！

已于 2022-02-10 17:23:53 修改

阅读量269

点赞数

分类专栏： JS 文章标签： ajax javascript ecmascript

于 2022-02-09 19:41:36 首次发布

本文链接：https://blog.csdn.net/tianranran/article/details/122848437

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

本文详细介绍了Ajax技术的工作原理及其在网页中实现异步数据交换的应用，通过JavaScript和ECMAScript语法，实现无需刷新整个页面即可更新部分内容的功能，提升用户体验。

摘要由CSDN通过智能技术生成

### 同步和异步

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。


编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

### ajax的概念

##### 什么是ajax

 1  Ajax: asynchronous  javascript  and  xml (异步js和xml)

 2  是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。 最大特点：页面不刷新

#####   ajax出现的历史

  1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp

直到2005年，google公司发布了一个邮箱产品gmail，内部有使用ajax技术，该事情引起人们对ajax的注意，也使得一蹶不振的javascript语言从此被人们重视起来

### ajax的使用

#### XMLHttpRequest对象
浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

**ajax的运行**

<font color="red">一定要打开phpsudy,js文件与php文件在同一主机下,才能请求成功.</font>

#### GET请求的创建

#####   **请求的创建与发送**

   主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.

//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2. 设置请求的类型,以及地址
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数：默认是异步
xhr.open("get", "01.php?name=Jepson"，异步/同步);

//3.发送请求到服务器
xhr.send(null);


<button>发送</button>
    <script>
        document.querySelector('button').addEventListener('click', ()=>{
            //创建一个ajax对象 
            /*
                XML 数据格式
                http 超文本传输协议
                Request 请求
                ajax技术其实是几个技术的组合和应用，并不是什么新的技术
            */
            let xhr = new XMLHttpRequest()
            //请求参数
            /*
                参数1表示请求方式 get或者post
                参数2表示地址，后端接口
                参数3表示同步或者异步，true异步  false同步 默认不写，就是异步
            */
            xhr.open('get', 'data/hello.php')
            //发送请求
            xhr.send()
            //监听请求状态
            xhr.onreadystatechange = ()=>{
                // console.log(xhr.responseText)
            }
        }, false)

get方式
<button>发送</button>
    <span></span>
    <script>
        let msg = document.querySelector('span')
        document.querySelector('button').addEventListener('click', () => {
            //创建一个ajax对象 
            /*
                xhrObj.readyState - 返回当前请求的状态
                xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
                xhr.readyState = 1时-初始化,对象建立未调用send()
                xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
                xhr.readyState = 3时-数据传输中,接受部分数据
                xhr.readyState = 4时-响应内容解析完成
            */
            let xhr = new XMLHttpRequest()
            //console.log(xhr.readyState)
            //请求参数
            xhr.open('get', 'data/hello.php?username=zhangsan&password=123')
            //console.log(xhr.readyState)
            //发送请求
            xhr.send()
            //监听请求状态
            xhr.onreadystatechange = () => {
                //console.log(xhr.readyState)
                //判断状态是4的时候才能保证成功
                if(xhr.readyState == 4){
                    //当http传输协议是200的时候，这样确保数据传输没有问题
                    if(xhr.status == 200){
                        // let res = JSON.parse(xhr.response)
                        // msg.innerHTML = res.body.msg
                    }
                }
            }
        }, false)


php

<?php
    echo 'hello ajax!';
?>

实现一个简单登录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            display: block;
            margin: 20px;
        }
    </style>
</head>
<body>
    <input type="text" value="">
    <input type="password">
    <input type="button" value="登陆">
    <script>
        let btn = document.querySelector('input[type=button]')
        btn.onclick = ()=>{
            let user = document.querySelector('input[type=text]').value
            let pass = document.querySelector('input[type=password]').value
            let xhr = new XMLHttpRequest()
            xhr.open('get', `data/login.php?username=${user}&password=${pass}`)
            xhr.send()
            xhr.onreadystatechange=()=>{
                if(xhr.readyState == 4){
                    
                    if(xhr.status == 200){
                        let data = JSON.parse(xhr.responseText)
                        
                        if(data.code==200){
                            location.href = 'http://www.mi.com'
                        }else{
                            alert('用户名或者密码错误')
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>


<?php
    header('content-type:text/html; charset=utf-8');
    $link = mysqli_connect('localhost', 'root', 'root', 'thr');
    //接收前端传递过来的数据
    $user = $_GET['username'];
    $pass = $_GET['password'];
    //把前端传递过来的数据和数据库里面的数据进行对比
    $sql = "select * from user where username = '$user' and password='$pass'";
    //解析sql语句
    $data = mysqli_query($link, $sql);
    //把结果以数组形式取出来
    $res = mysqli_fetch_all($data, MYSQLI_ASSOC);
    //判断数组的长度，如果有符号的就返回1，没有就是0，什么都不返回
    if(count($res)){
        echo json_encode(array('code'=>200, 'body'=>array(
            'msg'=> '登陆成功'
        )));
    }else{
         echo json_encode(array('code'=>404, 'body'=>array(
            'msg'=> '用户名或者密码错误'
        )));
    }
?>

post方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>冯建炜</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = ()=>{
            let xhr = new XMLHttpRequest()
            xhr.open('post', 'data/hello.php')
            //post方式需要设置请求头信息
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            //post方式传递参数必须写在send()方法里面，post方式传递参数不能加？
            /*
                get和post区别：
                + get方式不需要设置请求头信息
                + get方式传递参数需要拼接在地址后面，最前面需要加？号
                + post方式需要设置请求头信息
                + post方式传递参数需要设置send()方法里面，不需要加？号
            */
            xhr.send('username=zhangsan&password=123')
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        //responseXML 返回XMl
                        //responseText 返回文本（json）
                        //response 返回任何信息
                        console.log(xhr.response)
                    }
                }
            }
        }
    </script>
</body>
</html>

POST方法封装
 /*
            ajax_get封装
            + url地址
            + query查询字符串
            + success成功回调函数
            + error失败回调函数
        */
        function ajax_post(options) {
            let xhr = new XMLHttpRequest()
            //判断地址不能为空
            if (!options.url) {
                alert('地址不能为空')
                return
            }
            //查询字符串处理
            if (options.query) {
                let str = ''
                for (let key in options.query) {
                    str += `${key}=${options.query[key]}`
                    str += '&'
                }
                str = str.slice(0, -1)
                //请求参数
                xhr.open('post', options.url)
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                //发送请求
                xhr.send(str)
            } else {
                xhr.open('post', options.url)
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                //发送请求
                xhr.send()
            }
            
            //监听请求状态
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //短路运算符 前面的参数有，添加满足了才会执行后面的
                        options.success && options.success(xhr.response)
                    } else {
                        options.error && options.error()
                    }
                }
            }
        }
        ajax_post({
            url: 'data/hello.php',
            query: {a: 1},
            success(res){
                console.log(res)
            }
        })

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax方式

### 同步和异步同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。### ajax的概念##### 什么是ajax 1 Ajax: asynchronous javascript and xml (异步js和xml) 2 是可以与服务器进行(异步/同步)交互的技术之一。ajax的语言载体是jav
复制链接

扫一扫

专栏目录