AJAX 和 JSON

最新推荐文章于 2024-05-16 13:55:28 发布
最新推荐文章于 2024-05-16 13:55:28 发布
阅读量2.7k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onepunchmen00/article/details/79153637
版权

这里写图片描述

XMLHttpRequest对象
这里写图片描述

  if (xhr.readyState === 4 && xhr.status == 200) {//前一个检测请求是否完成  后一个确保请求成功了

因为请求失败也是4 所以要结合状态码来看

这里写图片描述

在本地安装服务器的几个方式
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>表单提交</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var xhr = window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject('Microsoft.XMLHTTP'));//兼容ie浏览器
    xhr.open('GET', './data.json')//第三个参数truefalse控制同步异步 默认异步
    xhr.onreadystatechange = loadData

    function loadData () {
      if (xhr.readyState === 4 && xhr.status == 200) {//前一个检测请求是否完成  后一个确保请求成功了
        //console.log(xhr)
//          xhr.responseType = 'json'
        store.innerHTML = xhr.response
      }
    }
    xhr.send()
  }
  </script>
</body>
</html>

data.json

{"data": {},"errno": 0}

XHR
这里写图片描述

这里写图片描述

*post方法要注意设置requestHeader
这里写图片描述

‘name=“abc”’

*另 如果采用forData的方法就不用
这里写图片描述

abort
终止一个ajax请求
请求已发出时 readyState会被置为0 但不会触发readyStatechange事件
通常用于重复向服务器发送相同请求的时候会终止前面的相同请求

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = './data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)

    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()
    console.log(xhr.readyState)
    xhr.abort()
    console.log(xhr.readyState)
    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
    }
  }
  </script>
</body>
</html>

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

upload 可以用于显示进度条

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

CORS跨域
什么是跨域？
不同的域名 不同端口 不同协议
这里写图片描述
CORS实现跨域的简单例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = 'http://sub.local.com/cors-data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)

    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
      if (xhr.readyState === 4){
          console.log(xhr.status)
      }
    }
  }
  </script>
</body>
</html>

cors-data.php

<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:*')
  echo "{\"data\":{},\"errno\":0}"
?>

简单请求和复杂请求
这里写图片描述

预检请求失败后面真正请求不会发送

cors需要服务端设置响应头字段设置。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = 'http://sub.local.com/cors-data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)
    xhr.setRequestHeader('abc', '123')
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
      if (xhr.readyState === 4){
          console.log(xhr.status)
      }
    }
  }
  </script>
</body>
</html>

<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:*')
  header('Access-Control-Allow-Headers: abc')
  echo "{\"data\":{},\"errno\":0}"
?>

这里写图片描述

只允许一个域名 多个域名用 逗号隔开是不允许的

如果需要cookie进行验证必须加上这个字段

这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  document.cookie = 'name=client;';
  btn.addEventListener('click', ajax)
  function ajax () {
    var src = 'http://sub.local.com/cors-data-with-cookie.php'

    var xhr = new XMLHttpRequest()
    xhr.withCredentials = true

    xhr.open('GET', src)
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
    }
  }
  </script>
</body>
</html>

<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:http://dev.local.com');
  header('Access-Control-Allow-Headers: abc');
  //header('Set-cookie: name=imooc'); 这里要是不注释 name显示的是imooc而不是client
  $name = $_COOKIE['name'];
  echo "{\"data\" :{\"name\":\"".$name."\"},\"errno\":0}"
?>

获取字段
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)
  function ajax () {
    var src = 'http://sub.local.com/cors-data-with-cookie.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
          console.log(xhr.getResponseHeader('Date'))
      }
    }
  }
  </script>
</body>
</html>

<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:http://dev.local.com');

    header('Access-Control-Expose-Headers: Date'
  echo "{\"data\" :{\"name\":\"abc\"},\"errno\":0}"
?>

CORS跨域只需要Ajax的基础上在服务端添加header(’ Access-Control-Allow-Origin:* / 指定域名 ‘)；即可

如果需要携带cookie,服务端添加 header(’ Access-Control-Allow-Creedntials : true ‘) , Ajax中添加XHR . withCreedntials = true; 同时，在script标签中加入document.cookie = ’ cookie ‘即可。
正常使用AJAX会需要正常考虑跨域问题，CORS(Cross-origin resource sharing)就是一套AJAX跨域问题的解决方案，严格来说，它不是AJAX的变种，它是为了解决跨域问题而衍生的一个机制。

它允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可，就像你上面写的服务端添加 header()；如果需要携带cookie，你写代码的是正确的。

ajax
全局配置

花江夏树
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
通过Ajax进行Post提交Json数据的方法
12-09
js代码 $.ajax({ type : "POST", url : js_path + "/maintainAdd/add", data : JSON.stringify(madd_data.editMaintain), contentType : "application/json", dataType : "json", complete:function(msg) { layer.msg("报修成功",{time:2000}); layer.close(madd_data.w_c_
ajax用post提交json数据,通过Ajax进行Post提交Json数据的方法
weixin_30789475的博客
08-05 7325
js代码$.ajax({type : "POST",url : js_path + "/maintainAdd/add",data : JSON.stringify(madd_data.editMaintain),contentType : "application/json",dataType : "json",complete:function(msg) {layer.msg("报修成功",{...
ajax+json进行数据传输请求（ssm框架）_前后端的数据传递,建议采用json+ajax请求方式(1)
最新发布
2401_85014130的博客
05-16 252
还可以是String等等，比如我做如下修改，将JSONObject改为String类型，然后直接返回一个String类型的ce。dataType: ‘json’, //数据返回类型，可以是xml、json等。success: function (data) { //成功，回调函数。a）我们设置的方法为，只要点击“id=b1”的按钮，就会触发这个函数。error: function (er) { //失败，回调函数。type: “POST”, //类型，POST或者GET。1.3 controller写法。
ajax使用POST提交json数据
热门推荐
大秦铁骑
03-23 4万+
$(document).ready(function () { var schoolList={   "pageCount": "2",   "pageIndex": "1",   "sign": "1",   "uniPayId": "9dc1308bab2b4b49987a0c12dd7339f5" }  $.ajax({ t
AJAX请求（GET、POST、响应JSON）
四问四不知的博客
05-29 1028
序言 作为一个后端Java工程师，不能只关注于自己的一亩三分地，还是多了解一下前端的知识，更加有助于自己的开发，在理解上前后端的对接会更为平滑。 AJAX（Asynchronous JavaScript and XML） AJAX是异步的 JavaScript 和 XML的缩写。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 XML是可扩展标记语言（Extensible Markup Language）的缩写
ajax的post请求数据为json格式相关设置
个人笔记
02-09 2362
平时用request封装axios习惯了突然用ajax传参时一直出问题，原来是配置设置错了。
Ajax和Json的笔记
03-06
Ajax和Json的笔记
Ajax-and-JSON-tuts:Ajax和JSON-初学者-11章-源代码-ajax source code
03-25
Ajax 和 JSON 是现代 web 开发中的重要技术，用于创建交互性更强、响应速度更快的网页。这个名为 "Ajax-and-JSON-tuts" 的资源包，很可能是为初学者准备的一系列教程，涵盖了从基础到进阶的 Ajax 和 JSON 使用方法。...
什么是Ajax和json？？？
07-25
本文详细总结了ajax和json的使用方法和详细示例。
jQuery-ajax-json实现自动轮播图.rar
04-25
本教程将介绍如何利用jQuery、ajax和json技术来实现一个自动轮播图的功能。jQuery是一个轻量级的JavaScript库，极大地简化了DOM操作、事件处理和Ajax交互；ajax用于异步数据传输，使页面无需刷新即可获取新数据；...
Ajax+Json案例
02-13
这个“Ajax+Json案例”可能是一个教学资源或者示例代码集合，用于帮助开发者理解和实践这两种技术的结合。 Ajax是一种在不刷新整个网页的情况下，通过后台与服务器进行少量数据交换，从而实现局部更新页面的技术。...
jQuery中ajax请求后台返回json数据并渲染HTML的方法
10-18
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AJAX JSON的数据传输
忆亦何为的博客
10-14 3057
我们发现在后端的json字符串拼接实在是太痛苦了，因为json只能使用双引号“”，而双引号在字符串里需要进行转义，所以拼接字符串的代码看起来就很另类。AJAX请求从后端响应回来的是一串字符串，javascript怎么把拼接JSON格式的字符串转换成JSON对象。这时候可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。var json对象名字 = {“属性名1” ：属性值1，“属性名2”：属性值2 …它是一串JSON格式的字符串，需要把它转换成JSON对象。
Ajax基础：向服务器端传递post请求参数（普通类型+json类型）
昔冰_G的博客
09-20 8866
（普通类型的请求数据） 客户端04ajax.html的代码： <body> <p><input type="text" name="" id="username"></p> <p><input type="text" name="" id="age"></p> <p><input type="button" name="" value="提交" id="btn">&l..
ajax前后端数据传输的编码格式，Ajax提交json格式的数据、Ajax提交文件数据、Ajax实现弹窗的二次确认、批量增加数据、分页的原理及推导、分页类的使用
m0_69962105的博客
11-21 396
2、默认的编码格式：urlencoded，需要修改contentType类型：json格式的。2、数据传输形式：title=' '&print=' '&publish=' '1、默认情况下，Ajax提交的数据后端还是在request.POST中接受的。注意：对于符合urlencoded格式的数据后端都是在request.POST中接收数据的。文件数据通过request.FILES方式接收数据，不能使用request.POST。1、默认的编码格式是：urlencoded。1、get请求方式没有编码方式。
AJAX&JSON基本知识（详解！）
weixin_57800914的博客
08-24 282
AJAX：ASynchronous JavaScript And XML 异步的JavaScript 和 XML*AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。*是客户端给服务器端发送消息以及接收响应的工具。*提升用户的体验。
Ajax和Json
m0_62063669的博客
08-02 931
Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
【ajax】post请求的三种常用数据格式
chtazycdf的博客
03-13 818
post请求的几种常用数据格式
AJAX和JSON详解
write less , do more
05-08 1万+
AJAX和JSON详解
详细介绍Ajax和Json
04-02
Ajax（Asynchronous ...Ajax和Json通常一起使用，Ajax用于异步获取数据，Json用于将数据从服务器传输到客户端。在Web应用程序中，通过使用Ajax和Json，可以实现动态的交互式用户界面，提高用户体验和应用程序的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值