ajax，json，跨域jsonp总结

最新推荐文章于 2023-07-15 00:25:13 发布
最新推荐文章于 2023-07-15 00:25:13 发布
阅读量83 收藏
点赞数
文章标签： json php javascript ViewUI
原文链接：https://segmentfault.com/a/1190000006098986
版权

前言：本篇文章总结一下ajax，书本上都是基础知识的介绍，但是没有实例，所以我参照慕课网上的课程，结合实际例子进行总结，其中课程中后台是用php写的，本篇文章不做介绍。

1.ajax作用

使用了ajax技术的网页，通过在后台跟服务器进行少量的数据交换，网页就可以实现异步的局部更新。

2.XMLHttpRequest对象的创建

  1. 运用HTML和CSS来实现页面，表达信息

  2. 运用XMLHttpRequest和Web服务器进行数据的异步交换

  3. 运用js操作DOM，实现动态的局部更新。

实例化XMLHttpRequest对象：var request = new XMLHttpRequest();

3.HTTP请求

  1. GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000个字符
    发送的数据可见，并不安全

  2. POST：一般用于修改服务器上的资源，对所发送信息的数量无限制，发送的数据不是明文可见，较为安全。
    用于：发送表单数据，新建修改删除

4. XMLHttpRequest发送请求

XHR对象有两个方法：

  1. open(method,url,async)：三个参数：发送请求的方式，url请求地址（相对地址和绝对地址），true代表异步，默认是true，设置为false表示同步

  2. send(string)：把请求发送到服务器上（GET方式可以不写参数，POST方式不写参数意义不大）

例子：

    request.open("GET","get.php",true);
    request.send();

    request.open("POST", "post.php", true);
    request.send();
    
    request.open("POST", "create.php" ,true);
    //设置http的头信息，告诉服务器要发送表单
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send("name=王二狗&sex=男");

5.XMLHttpRequest取得响应

responseText:获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
getAllResponseHeader()：获得所有的响应报头
getResponseHeader():查询响应中的某个字段的值

.readyState属性
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已经完成，且响应已经就绪，也就是响应完成了。

    var request = new XMLHttpRequest();
    request.open("GET","get.php",true);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){
            //做一些事情
            request.responseText
        }
    }

6.一个例子

  1. 包含员工的信息，可以通过输入员工的编号查询员工基本信息

  2. 新建员工信息，包含员工姓名，员工编号，员工性别，员工职位。
    纯HTML页面，用来实现员工查询和新建的页面

php页面，用来实现查询员工和新建员工的后台接口（在此不再多写）

（1）客户端实现

html静态页面实现

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Demo</title>
    <style>
        *{
            font-size: 30px;
            line-height: 1.8;
        }
    </style>
</head>

<body>
    <h1>员工查询</h1>
    <label>请输入员工编号：</label>
    <input type="text" id="keyword"/>
    <button id="search">查询</button>
    <p id="searchResult"></p>

    <h1>员工新建</h1>
    <label>请输入员工姓名：</label>
    <input type="text" id="staffName"/><br>
    <label>请输入员工编号：</label>
    <input type="text" id="staffNumber"/><br>
    <label>请选择员工性别：</label>
    <select id="staffSex">
        <option>男</option>
        <option>女</option>
    </select><br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffJob"/><br>
    <button id="save">保存</button>
    <p id="createResult"></p>
    
    <script src="ajax.js"></script>
</body>
</html>

js实现ajax实现页面局部刷新

    //获取查询的按钮，添加一个事件处理函数
    document.getElementById("search").onclick = function(){
        //发送ajax查询请求并处理
        var request = new XMLHttpRequest();
        //GET需要把参数写在url中，通过keyword的value值获取
        request.open("GET", "service.php?number="+document.getElementById("keyword").value);
        request.send();
    
        //将服务器返回的值在页面中局部更新
        request.onreadystatechange = function(){
            if(request.readyState === 4){
                if(request.status === 200){
                    //查询成功则局部更新服务器返回结果
                    document.getElementById("searchResult").innerHTML = request.reponseText;
                }else{
                    alert("发生错误"+ request.status);
                }
            }       
        }
    }
    
    //获取保存的按钮，添加一个事件处理函数
    document.getElementById("save").onclick = function(){
        //发送ajax查询请求并处理
        var request = new XMLHttpRequest();
        request.open("POST", "service.php");
        //POST传入方式不需要传递参数，但是需要构造参数一下
        var data = "name="+document.getElementById("staffName").value
                +"&number="+document.getElementById("staffNumber").value
                +"&sex="+document.getElementById("staffSex").value
                +"&job="+document.getElementById("staffJob").value;
        //bug处理      
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(data);
    
        //将服务器返回的值在页面中局部更新
        request.onreadystatechange = function(){
            if(request.readyState === 4){
                if(request.status === 200){
                    //创建成功后则局部更新服务器返回结果
                    document.getElementById("createResult").innerHTML = request.reponseText;
                }else{
                    alert("发生错误"+ request.status);
                }
            }       
        }
    }

（2）JSON实现

eval和parse解析JSON

    //eval
    var jsondata = '{"staff":[{"name":"洪七", "age":35}, {"name":"郭靖","age":35}, {"name":"黄蓉", "age":30}]}';
    var jsonobj = eval('('+ jsondata+')');
    alert(jsonobj.staff[0].name);
    
    //JASON.parse
    var jsondata = '{"staff":[{"name":"洪七", "age":35}, {"name":"郭靖","age":35}, {"name":"黄蓉", "age":30}]}';
    var jsonobj = JASON.parse(jsondata);
    alert(jsonobj.staff[0].name);

eval的方式解析json字符串，不会管json字符串合不合法，并会执行字符串中的js代码，会很不安全
在线json字符串校验工具：JSONLint

（3）JSON改写例子

前后端的约定

{
    "success":true,      //代表返回成功与否
    "msg":"xxx",    //代表返回成功与不成功时服务器返回的信息
}

js代码

document.getElementById("search").onclick = function(){
    var request = new XMLHttpRequest();
    request.open("GET","service.php?number="+document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState === 4){
            if(request.status === 200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("searchResult").innerHTML = data.msg;
                }else{
                    document.getElementById("searchResult").innerHTML = "出现错误："+data.msg;

                }
            }else{
                alert("发生错误："+request.status);
            }
        }
    }
}

    //获取保存的按钮，添加一个事件处理函数
    document.getElementById("save").onclick = function(){
        //发送ajax查询请求并处理
        var request = new XMLHttpRequest();
        request.open("POST", "service.php");
        //POST传入方式不需要传递参数，但是需要构造参数一下
        var data = "name="+document.getElementById("staffName").value
                +"&number="+document.getElementById("staffNumber").value
                +"&sex="+document.getElementById("staffSex").value
                +"&job="+document.getElementById("staffJob").value;
        //bug处理      
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(data);
    
        //将服务器返回的值在页面中局部更新
        request.onreadystatechange = function(){
            if(request.readyState === 4){
                if(request.status === 200){
                    var data = JSON.parse(request.responseText);
                    if(data.success){
                        document.getElementById("createResult").innerHTML = data.msg;
                    }else{
                        document.getElementById("createResult").innerHTML = "出现错误："+data.msg;
                    }

                }else{
                    alert("发生错误"+ request.status);
                }
            }       
        }
    }

（4）用jquery实现ajax

jQuery.ajax([settings]),settings给出了很多的设定值，可以用一些常用的设定值完成请求

  1. type:类型，"POST"或者"GET"，默认为"GET"

  2. url:发送请求的地址

  3. data:是一个对象，连同请求发送到服务器的数据（POST请求时使用）

  4. dataType:预期服务器返回的数据类型。如果不设定，jquery将自动根据HTTP包MIME信息来智能判断，一般我们采用JSON格式，可以设置为"json"

  5. success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

  6. error:是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

用jquery实现刚才的例子

  1. 首先在HTML中加载jquery的资源库

  2. 改造例子：

//首先页面载入完成以后执行的代码
$(document).ready(function(){
    $("#search").click(function(){
        $.ajax({
            type:"GET",
            url:"service.php?number="+$("#keyword").val(),
            dataType:"json",
            success:function(data){
                if(data.success){
                    $("#searchResult").html(data.msg);
                }else{
                    $("#searchResult").html("出现错误："+data.msg);
                }
            },
            error:function(jqXHR){
                alert("发生错误："+jqXHR.status);
            } 
        });
    });
    
    $("#save").click(function(){
        $.ajax({
            type:"POST",
            url:"service.php",
            dataType:"json",
            data:{
                name:$("#staffResult").val(),
                number:$("#staffNumber").val(),
                sex:$("staffSex").val(),
                job:$("staffJob").val(),
            },
            success:function(data){
                if(data.success){
                    $("createResult").html(data.msg);
                }else{
                    $("createResult").html("出现错误："+data.msg);
                }
            },
            error:function(jqXHR){
                alert("发生错误："+jqXHR.status);
            }
        });
    }); 
});

7.跨域

javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单地理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

例如：

    www.abc.com/index.html 调用 www.abc.com/service.php      （非跨域）
    www.abc.com/index.html 调用 www.efg.com/service.php      （跨域）
    www.abc.com/index.html 调用 bbs.abc.com/service.php      （跨域）
    www.abc.com/index.html 调用 www.abc.com:81/service.php   （跨域）
    www.abc.com/index.html 调用 https://www.abc.com/service.php   （跨域）

（1）JSONP

利用HTML<script>可以跨域的特性

    function handleResponse(response){
        alert('My name is' + response.name);
    }
    
    var script = document.createElement('script');
    script.src = 'http:127.0.0.1:3000/json?callback=handleResponse';
    document.body.insertBefore(script, document.body.firstChild);
weixin_33904756
关注
AJAX跨域请求JSONP获取JSON数据的实例代码
10-20
总结起来，JSONP是一种通过JavaScript回调函数实现的跨域数据交换技术，主要用于那些不支持CORS或者需要兼容旧版浏览器的应用场景。然而，由于其局限性，随着CORS的普及，JSONP在现代Web开发中的使用正在逐渐减少。
jquery的ajax和getJson跨域获取json数据的实现方法
10-26
总结而言，jQuery的ajax和getJson方法通过JSONP技术可以有效实现跨域数据请求。在实际开发中，要根据具体的业务场景和安全要求选择合适的技术手段，以达到既满足功能需求，又保证数据安全和系统性能的目的。
ajax的作用和特点
qq_64209130的博客
08-17 1849
3xx：一类重要的高频考点，301：表示永久转移，返回旧域名会跳转到心域名。一般用于服务器负载均衡，但服务器的并发数达到最大时，服务器会将后续访问的用户转移到其他服务器上去。304：表示不设置缓存，对于不经常更新的文件，例如css/js/html文件，服务器会结合客户端设置304状态，加载过的资源下次请求时会在客户端中获取。2xx：表示请求已经被服务器接收，理解，请接受。常见的有，200 表示ok，表示服务能够返回信息。413：表示和服务器的交互过大。ontimeout: 表示请求的超时，执行的方法。...
Ajax详解
最新发布
m0_63260018的博客
07-15 2665
Ajax 是 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）的缩写。它是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。简单来说，Ajax 可以让网页在不影响用户体验的前提下，实时更新数据。
【转】移动web资源整理
weixin_33887443的博客
04-21 171
目录（更新于20150311） meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 viewport模板 常见...
ajax的作用
热门推荐
温壁
10-17 1万+
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 无刷新数据读取 用户登陆、股票基金网 异步、同步 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。有很多使用 ...
利用jsonp解决js读取本地json跨域的问题
10-17
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中，由于同源策略的限制，AJAX无法直接从本地文件系统获取JSON数据。然而，JSONP（JSON with Padding）是一种绕过同源策略的技术，尤其适用于GET...
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
10-23
总结来说，JSONP提供了一种简单但有效的跨域解决方案，使得在不同源之间交换数据成为可能。尽管它主要适用于GET请求，且安全性比AJAX请求有所下降（因为执行的是脚本代码），但在某些特定场景下，它仍然是一个有用的...
JS实现移动端判断上拉和下滑功能
10-19
通过手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。接下来通过实例代码给大家介绍js移动端判断上拉和下滑功能，感兴趣的朋友一起看看吧
ajax的作用即使用
01-30
基础学习ajax的内容及如何使用ajax页面加载性能问题(刷新整个页面快还是刷新局部页面快
大锅乱炖10大H5前端框架
vvhh22的博客
03-31 907
作为一名在前端死缠烂打6年并且懒到不行的攻城士，这几年阅过很多从知名到很知名的前端框架，本来想拿15-20个框架来分享一下，但在跟几个前辈讨教写文章的技巧时果断被无 情的打击了，所以这里我还是低调的只拿出10个框架来个大锅乱炖，凑够字数也就全剧终了。下面的框架也没有什么先后顺序之分，我想到啥就写啥啦( 作为前端，我一向都这么的任性 ^_^ )。 Bootstrap 首先说
ajax&JQ(上)
David_excellence的博客
11-13 1389
** 一、ajax的作用 ** Ajax是使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。...
ajax基础
weixin_34384557的博客
06-24 242
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，...
js中2个等号与3个等号的区别
iteye_16184的博客
09-21 433
首先，== equality 等同，=== identity 恒等。 ==， 两边值类型不同的时候，要先进行类型转换，再比较。 ==，不做类型转换，类型不同的一定不等。 下面分别说明： 先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等： 1、如果类型不同，就[不相等] 2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN...
Ajax
weixin_30603633的博客
05-28 140
参考网址：https://baike.baidu.com/item/ajax/8425?fr=aladdin Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。 Ajax 是一种用于创建...
AJAX的作用与编写
Du_Ke_Can的博客
10-17 855
AJAX的作用与编写 一、AJAX是什么 AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）。 AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，使网页实现异步更新。（不用加载整个网页就能实现部分更新） 二、传统更新方式与AJAX的区别 传统的开发模式：用户的每一次操
Ajax入门与应用
童磨
05-12 618
1. Ajax入门与应用 从http协议开始 http协议是超文本传输协议，是简单可靠的互联网文件传输协议 输入网址并敲下回车 浏览器发出HTTP请求，请求服务器上的资源 服务器上的资源通过HTTP协议传输到本地，在浏览器中进行渲染 一次HTTP请求，分为请求和响应（请求：上行报文，响应：下行报文） 一张网页，可以产生多个HTTP请求 HTTP请求触发的条件 用户输入新的网址敲下回车 点...
简单的JavaScript图像延迟加载库Echo.js
vvhh22的博客
03-31 458
插件描述：和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。 兼容性 Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属
JSON与JSONP：AJAX跨域调用的首选与协议解析
总结来说，JSON是现代Web开发中的重要数据交换格式，而JSONP则是在特定场景下解决跨域问题的有效方法。开发者在选择使用哪种技术时，需要根据项目需求权衡数据交换的便利性和兼容性，以及对安全性、性能的影响。同时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值