原生js实现ajax

最新推荐文章于 2024-09-10 18:50:14 发布

pangxia131

最新推荐文章于 2024-09-10 18:50:14 发布

阅读量109

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/pangxia1314/article/details/104137116

版权

1、什么是ajax? 异步的JavaScript和XML

XHTML：可扩展的超文本标记语言
||
HTML

xml:数据结构可扩展的标记语言
json:轻量级的数据格式
2、ajax使用的场景
1、局部刷新
2、表单验证 (最初的设计目的)
3、无刷新动态获取数据
3、ajax的优点

1、效率高用户体验好

2、无刷新动态获取数据

4、ajax请求数据的流程
1，创建一个ajax对象 xhr
2，打开地址
3，发送
4，等待数据
5，ajax的状态： ajax的状态有哪些
0-未初始化，尚未调用open()方法
1-启动，调用open()方法，已调用send()的方法，正在发送请求
2-发送，已经调用send()方法，已接受到响
3-解析正在解析响应数据
4、完成，响应数据解析完成，客户端可以调用;（我们都是使用xhr.readyState == 4 判断ajax请求是否结束）

6，服务器的状态
常见的服务器状态码有哪些？
必须要记住的
100：客户端必须发送请求
200：请求成功
304：重定向 (提问);
404: 数据不存在
500：服务器错误

7.ajax能否跨域？如何解决跨域？场景的跨域方式有哪些？
（1）不能
（2）跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

解决跨域的方式
A:基于script标签实现跨域
B:基于jquery跨域 jquery已经把跨域封装到ajax上 jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求
C:通过iframe来跨子域
8.get与post的区别
1、上传获取数据
2、get不安全 post安全这样理解有点错误
form Data
取决于http协议和https协议
get传递数据的时候通过url进行传递数据在地址？后面进行传递数据
类型 key = val 如果是传递多个值的时候用&分割
例如
www.baidu.com?username=帅哥&age=34&sex=男
get存储量的大小只有2K
post传递数据的时候虚拟的机制 setRequestHeader() send(数据)
（1）get的ajax
//第一步创建ajax对象

var xhr = new XMLHttpRequest();

//第二步打开要发送的地址
xhr.open(“get”,“http://10.9.188.25/qbank/php/select.php”);
/*
参数1：method—>get post
参数2：请求的地址
参数3：布尔值默认是false 异步true同步
*/
//第三部发送
xhr.send();
console.log(xhr.readyState)
//第四步
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}
}

（2）post的ajax
//第一步创建ajax对象
var xhr = new XMLHttpRequest();

//打开请求的方式
xhr.open(“post”,“http://10.9.188.25/qbank/php/insert.php”);

//如果是post进行提交的时候必须设置响应头
xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

//post发送数据请求的时候参数要放在send里面
xhr.send(“content=面向对象&where=this的指向&idea=多练”);

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}else{
console.log(xhr.status);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //1.实例化一个对象
    // var xhr = null;
    // if(window.ActiveXObject){  //处理IE5  IE6兼容问题
    //     xhr = new ActiveXObject("Microsoft.XMLHTTP");
    // }else{
    //     xhr = new XMLHttpRequest()  //实例化一个对象
    // }
    // if(xhr!=null){
    //     //2.配置请求信息  get,url,是否异步
    //     xhr.open("GET","address.json",true);
    //     //3.发送请求
    //     xhr.send();
    //     //4.回调函数  处理数据
    //     xhr.onreadystatechange = function(){
    //             //确定发送成功
    //             if(xhr.readyState==4){
    //                 //是否响应成功
    //                 if(xhr.status==200){
    //                     var res = JSON.parse(xhr.responseText)
    //                     console.log(res);
                        
    //                 }
    //             }
    //     }
    // }

    function ajax(type,url,data,success){
  //1.实例化一个对象
  var xhr = null;
    if(window.ActiveXObject){  //处理IE5  IE6兼容问题
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xhr = new XMLHttpRequest()  //实例化一个对象
    }
    if(xhr!=null){
        //2.配置请求信息  get,url,是否异步
        xhr.open(type,url,true);
        //3.发送请求
        xhr.send();
        //4.回调函数  处理数据
        xhr.onreadystatechange = function(){
                //确定发送成功
                if(xhr.readyState==4){
                    //是否响应成功
                    if(xhr.status==200){
                        var res = JSON.parse(xhr.responseText)
                        console.log(res);
                        success(res);
                        
                    }
                }
        }
    }
    }
    ajax("GET","address.json",{},function(res){})
    </script>
</body>
</html>

pangxia131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现ajax

1、什么是ajax? 异步的JavaScript和XMLXHTML：可扩展的超文本标记语言||HTMLxml:数据结构可扩展的标记语言json:轻量级的数据格式2、ajax使用的场景1、局部刷新2、表单验证 (最初的设计目的)3、无刷新动态获取数据3、ajax的优点1、效率高用户体验好2、无刷新动态获取数据4、ajax请求数据的流程1，创建一个ajax对象 xhr...
复制链接

扫一扫