ajax知识点整理

最新推荐文章于 2024-04-03 18:23:44 发布

Cc.＇沐艿伊℡

最新推荐文章于 2024-04-03 18:23:44 发布

阅读量463

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/92080853

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

ajax知识点整理

1.概念性知识

ajax的概念: 用来做数据交互使用
ajax的原理: 通过XMLHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果
简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果

ajax的核心: XMLHttpRequest对象
ajax的特点: 异步加载, 局部刷新
同步: 一次一个, 前一个没执行完, 后一个也不能开始
异步: 一次一堆, 前一个没执行完, 后一个也能开始

ajax的好处:

最大的点就是页面无刷新, 在页面与服务器通信时, 用户体验会非常好, 节约宽带,节约资源
在使用异步请求时, 具有更加迅速的响应能力. 不需要打断用户操作

* 注意: 涉及到ajax的访问, 千万不能使用文件协议的方式打开

2. ajax的执行步骤（js操作）

 //1. 创建XmlHttpRequest对象-->相当于创建了一个http请求的对象,主要用于和服务器交换数据
    var xhr = new XMLHttpRequest();
    //2. open(规定请求的类型get/post, URL,是否异步请求(默认是异步))-->相当于与服务器建立了一个特定端口的链接
    xhr.open('get','./test.txt');
    //3.将请求发送到服务器开始请求
    //  send(string-->只能用在post方式请求的时候);
    xhr.send();
    //4.等待响应. 需要使用事件机制去通知他
    //这个事件只要状态改变了就会触发
    xhr.onreadystatechange = function () {
        //console.log(111);//触发了三次
        console.log(this.readyState);//状态的数值: 2,3,4
        //判断响应已经就绪时, 就可以拿到我想要的数据了
        if(this.readyState != 4) return;//当你的函数体只有一行时, 可以省略大括号
        console.log(this.responseText);//拿到响应的文本
        document.getElementsByTagName('body')[0].innerHTML =
        this.responseText;
    }

3. readyState的状态变化

var xhr = new XMLHttpRequest();
    console.log(xhr.readyState);// 0: 请求未初始化
    
    xhr.open('get','01.ajax的基本概念.html');
    console.log(xhr.readyState);//1 : 服务器连接已经建立

    xhr.send();
    //console.log(xhr.readyState);//1: 服务器连接已经建立

    xhr.addEventListener('readystatechange', function () {
        console.log(xhr.readyState);//2, 3, ,4
        switch(xhr.readyState){
            case 2:  //请求已接收
                //获取响应头
                console.log(this.getAllResponseHeaders());//所有响应头
                console.log(this.getResponseHeader("date"));//其中一个
                //获取响应文本内容
                console.log(this.responseText);//没有
                break;
            case 3:  //请求处理中
                //获取响应文本内容
                console.log(this.responseText);// 1kb = 1024字母  500多汉字
                //但是有可能不完整. 不保险
                break;
            case 4:// 整个响应报文就已经完整的下载下来了
                console.log(this.responseText);
        }
    })

4. ajax遵循http协议

 // 怎么遵循http协议: 就是要设置请求头和请求体
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'test.txt');
    //设置请求头  一般都是 urlencoded格式. 都会设置 application/x-www-form-urlencoded
    xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
    //设置请求体
    xhr.send('username=张三&password=123456');//就是发送你要传过去的数据

    xhr.addEventListener('readystatechange', function () {
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
        }
    })

5. 使用get请求数据

 <ul id="uu">
        <!--请求后台的数据渲染到dom中来-->
    </ul>
    <script>
        var u = document.getElementById("uu");
        var xhr = new XMLHttpRequest();
        xhr.open('get', './contacts.json');
        xhr.send();
        xhr.addEventListener('readystatechange', function () {
            if( this.readyState != 4) return;
            console.log(this.responseText);
            var data = this.responseText;//此时data为字符串,不能遍历
            data = JSON.parse(data);//转化为json对象
            console.log(typeof data);//object
            //解决办法: 转化成数组对象
            for(var i = 0 ; i < data.length ; i++){
                var li = document.createElement("li");
                li.innerHTML = data[i].name;
                u.appendChild(li);
            }
        })

    *  JSON.parse()  --->将json字符串转化为json对象
    *  JSON.stringify --->将json对象转化为json字符串
    *
    * eval()函数也可以将JSON对象解析为对象 写法不一样  eval("("+data+")");

使用get请求后台数据—广告栏案例

点击对应的li，即对应的广告栏在广告框下方显示对应的内容
效果图
在这里插入图片描述

<ul id="uu"></ul>
<div id="box">

</div>
<script>
    var uu = document.getElementById("uu");
    var box = document.getElementById("box");

    var xhr = new XMLHttpRequest();
    xhr.open("get","http://www.liulongbin.top:3005/api/getnewslist");
    xhr.send();
    xhr.addEventListener('readystatechange', function () {
        if(this.readyState != 4) return;
        if(JSON.parse(this.responseText).status == 0){
            var data = JSON.parse(this.responseText).message;
            console.log(data)
            for(var i = 0 ; i< data.length; i++){
                var li = document.createElement("li");
                li.innerHTML = data[i].title;
                //存对应的id
                li.id = data[i].id;
                uu.appendChild(li);
                //给每一个li绑定点击事件
                li.addEventListener('click', function () {
                    console.log(this.id)
                    //根据id传数据
                    var xhr2 = new  XMLHttpRequest();
                    xhr2.open('get', 'http://www.liulongbin.top:3005/api/getnew/'+this.id);
                    xhr2.send();
                    xhr2.onreadystatechange = function () {
                        if(this.readyState != 4) return;
                        console.log(JSON.parse(this.responseText));
                        var result = JSON.parse(this.responseText)
                        box.innerHTML = result.message[0].content;
                    }
                })
            }
        }
    })
</script>

6.使用post添加数据

在输入框里面输入内容，再点击按钮，会把数据存入服务器中
效果图
在这里插入图片描述

 添加品牌数据: <input type="text" id="product">
    <br>
    <button id="btn">确定</button>
    <script>
        var inp = document.getElementById("product");
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            var addName = inp.value;
            var xhr = new XMLHttpRequest();
            xhr.open("post","http://www.liulongbin.top:3005/api/addproduct");
            //设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("name="+addName);
            xhr.addEventListener("readystatechange", function () {
                if( this.readyState != 4) return;
                console.log(this.responseText);
            })
        }
        /*
        * get:   一般用于根据参数获取数据,
        * post:  相对更安全, 一般用户信息提交, 表单提交. 无限制大小
        * */

7.jQuery中三种请求方法

1. load() 用于局部刷新
// $(selector).load(url, [data], function(response, status, xhr ){})
// data: 发送到服务器的数据
//response : 响应回来的结果
//status : 响应的状态
//xhr: XMLHttpRequest对象.给机器看的

   $("button").eq(0).click(function () {
        $("#box").load('./test.txt',{"name":"张三","age":20}, function (res, status) {
            console.log(res);
            console.log(status);
        })
    })

2.// get()//获取数据
// $(selector).get(url, function(responser ){})
//response : 响应回来的结果
//xhr: XMLHttpRequest对象.给机器看的

    $("button").eq(1).click(function () {
        $.get('http://www.liulongbin.top:3005/api/getprodlist', function (res) {
            console.log(res)
        })
    })

3. //post（）存数据

// $(selector).load(url, [data], function(response){})
// data: 发送到服务器的数据
//response : 响应回来的结果

    $("button").eq(2).click(function () {
        $.post('http://www.liulongbin.top:3005/api/addproduct',{name:"黑人问号"}, function (res) {
            console.log(res)
        })
    })

8.jQuery中的ajax

$.ajax({
url: ‘请求的地址’,
type:‘请求的类型’, get/post
data:‘要发送到服务器的数据’,
dataType: ‘要求后台返回给我的数据类型’, json
success: function(){ 请求成功所执行的函数},
async: 请求是否异步处理 . 默认是true, 异步
})

$("button").click(function () {
    var value = $('input').val();
    $.ajax({
        url:'http://www.liulongbin.top:3005/api/addproduct',
        type:'post',
        // data:{name: value},
        data:'name='+value,
        dataType:'json',
        //请求成功或者失败之前执行的函数
        beforeSend:function(){
            console.log("请求成功或者失败之前执行的函数")
        },
        success: function (data) {
            console.log(data);
        },
        //请求失败所执行的函数
        error: function (data) {
            console.log("失败")
        }
    })
})

9. 跨域问题

   * 为什么会出现跨域

跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等

http://www.111.com/index.html 调用 http://www.111.com/demo.php —> 非跨域
http://www.111.com/index.html 调用 http://www.123.com/demo.php —>跨域: 主机名不同
http://www.111.com:3000/index.html 调用 http://www.111.com:8080/demo.php -->跨域: 端口号不同
http://aaa.111.com/index.html 调用 http://bbb.111.com/demo.php --> 跨域: 主机名不同
http://www.111.com/index.html 调用 https://www.111.com/demo.php --> 跨域: 协议不同

如何解决跨域问题
　
在后台设置响应头，允许跨域
　　header(‘Access-Control-Allow-Origin:’);//允许所有来源访问–>允许所有的语言对我这个语言发起请求
如果你想指定一个具体的语言的话, 把 * 换成请求过来的协议+主机名+端口号
　　header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
java代码的过滤方法：
response.addHeader(“Access-Control-Allow-Origin”, "");
response.addHeader(“Access-Control-Allow-Method”, “*”);
response.addHeader(“Access-Control-Allow-Headers”,“Content-Type”);
response.addHeader(“Access-Control-Max-Age”, “3600”);
* /
/

9. 关于jsonp-------使用jsonp实现跨域请求

    jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
    json是描述信息的格式，jsonp是信息传递双方约定的方法。

法1

<!--使用jsonp实现跨域请求-->
法1
<!--法一 : 利用script标签中src属性, 设置请求的地址, 因为src不受同源策略的约束-->
<!--<script src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>-->

法2

<!--法二: 使用jquery封装的ajax-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $.ajax({
        url:'http://www.runoob.com/try/ajax/jsonp.php?',
        type:'get',
        dataType:'jsonp',
        //请求php的参数名
        jsonp:'jsoncallback',
        //参数值:
        jsonpCallback: "callbackFunction",
        success: function (data) {
            console.log(data)
        }
    })

法3

   //法三: 使用 $.getJSON()
    $.getJSON('http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?', function (data) {
        console.log(data);
    })

Cc.＇沐艿伊℡

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax知识点整理

ajax知识点整理1.概念性知识ajax的概念: 用来做数据交互使用ajax的原理: 通过XMLHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果ajax的核心: XMLHttpRequest对象ajax的特点: 异步加载, 局部刷新同步:...
复制链接

扫一扫

专栏目录