AJAX（Asynchronous JavaScript And Xml）、get和post请求、url和跨域问题、JSON.parse和JSON.stringify方法

已于 2022-06-29 15:25:09 修改
阅读量500 收藏
点赞数 1
分类专栏： JavaScript 文章标签： 详解get和post请求 url地址和跨域问题 js原生AJAX异步请求详解 JS中JSON的方法使用 服务端返回数据注意点
于 2021-05-02 21:12:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIWWY/article/details/116350195
版权

目录

AJAX作用

AJAX用法（文字介绍）

XMLHttpRequest方法

XMLHttpRequest()

xml.open(method, url, async)

xml.setRequestHeader(name,value)

xml.send(string)

xml.getAllResponseHeaders()

xml.getResponseHeader(name)

xml.abort()

XMLHttpRequest属性

xml.onreadystatechange

xml.status

xml.statusText

xml.responseText

xml.responseXML

AJAX实例

服务器端响应请求注意

GET请求和POST请求

GET请求

发送数据存储位置

注意和要求

POST请求

发送数据存储位置

注意和要求

区别总结

url

url组成结构

跨域问题

如何解决跨域

encodeURIComponent(str)

JSON

JSON.parse(str)

JSON.stringify(obj)

AJAX作用

  1. 不刷新页面更新网页。
  2. 在页面加载后从服务器请求数据。
  3. 在页面加载后从服务器接收数据。
  4. 在后台向服务器发送数据。

AJAX用法（文字介绍）

  1. 创建一个异步XMLHttpRequest对象。
  2. 设置请求方式和请求地址（open方法，需设置请求地址，请求方法get或者post，同步或异步）。
  3. 发送请求（send方法）。
  4. 监听状态的变化（通过监听事件onreadystatechange）。
  5. 处理返回的结果。

XMLHttpRequest方法

XMLHttpRequest()

通过var xml = new XMLHttpRequest()创建AJAX对象。IE5~IE6使用var xml = new ActiveXObject('Microsoft.XMLHTTP')。

xml.open(method, url, async)

设置请求方式和请求地址等，method为请求方式包括'get'和'post'；url为请求文件地址（提交数据地址）；async为设置请求是异步还是同步，一般只传true，为异步。

xml.setRequestHeader(name,value)

设置请求头中属性和值，一次只能设置一条（设置多条则写多条setRequestHeader语句），当post请求时，send中如果发送了数据，需要在send前，open后添加一条xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");发送的数据才会被正常解析。

xml.send(string)

当传入string时，xml发送post请求，string为post携带的数据，格式为key1=value1&key2=value2&....&keyn=valuen的字符串。

xml.getAllResponseHeaders()

返回所有的响应头信息。

xml.getResponseHeader(name)

返回响应头信息中的name属性的值。

xml.abort()

消失当前请求（xml中所有内容清空）。

XMLHttpRequest属性

xml.onreadystatechange

xml对象的状态改变事件即xml.readyState的改变。xml.readyState有5个值0~4，0：请求未初始化；1：服务器连接已建立；2：请求已收到；3：正在处理请求；4：请求已完成且响应已就绪；当状态位为4且xml.status>=200&&xml<300||xml.status===304时，我们才能接收到服务器的响应内容并做处理。

xml.status

响应状态码，为数字，不同数字代表了不同的xml.statusText，200："OK"；403："Forbidden"；404："Not Found"等；

xml.statusText

响应状态码对应的文本。

xml.responseText

服务器返回前端的文本，为字符串，例如请求服务器中php文件，则该字符串为所有echo内容的连接；如果为txt文件，该字符串为txt的所有内容。

xml.responseXML

当服务器的返回数据为xml时，以此接收的是xml的根节点，类似#document，可以通过getElementsByTagName等方法获取需要内容。

AJAX实例

AJAX 实例 | 菜鸟教程

服务器端响应请求注意

  1. 注意在php执行结果有中文时，为防止乱码，需要添加header('content-type:text/html; charset=utf-8')。
  2. 如果php需要返回xml时，需要添加header('content-type:text/xml; charset=utf-8')。
  3. php中通过echo file_get_contents(filename:url)返回xml文件，其中参数为url，代表返回xml文件的地址。

GET请求和POST请求

GET请求

发送数据存储位置

通过把数据携带在url地址中，例如url='get请求_百度搜索'，其中https://www.baidu.com/s之后的为get提交的数据，以？连接。

我们也可以在控制台中查看，如下图所示，打开我们的控制台中的Network，找到我们请求发送数据的地址，图中为hello.php，？后面连接的就是数据，然后在Headers请求头中最下面Query String Parameters也是我们发送的数据，图中为userPwd：aaa。

注意和要求

  1. 大小要求小于2000字符。
  2. 不用于发送敏感信息（发送信息暴露在url地址中）。
  3. php中以$_GET接收。
  4. IE浏览器中的get请求，浏览器认为同一个url只有同一个结果即多次请求同一个url地址会拿到同一个内容（不是实时的），通常我们在url后面添加数据来保证url不同，来确保每次拿到实时数据，比如添加t=Date.now()。

POST请求

发送数据存储位置

存储在请求头中，如图所示，打开我们的控制台中的Network，找到我们请求发送数据的地址，图中为hello.php，在Headers请求头中最下面Form Data为我们发送的数据内容，图中为userPwd：jj。

注意和要求

  1. 无大小要求。
  2. 常用于发送敏感数据。
  3. php中以$_POST接收。
  4. HTML表单的默认编码类型为enctype='application/x-www-form-urlencoded'，当传递文件（图片）时，需要改为enctype='multipart/form-data'，而且在php中要以$_FILES接收，上传的文件会保存在tmp文件夹中，该文件夹为临时文件夹，如果间隔一段时间未使用，会自动清空该文件夹中内容（所以一般查看不到接收的文件），只有通过move_uploaded_file($originPath,$targetPath)转移文件地址，$originPath代表原来接收的地址，$targetPath代表新接收地址，这些地址是包含了接收文件的文件名的。
  5. 通过软件搭建的服务器一般设置有限制post请求大小、请求时长等。例如Wampserver软件，我们需要在安装的文件夹下的\bin\apache\apache2.4.37\bin\的php.ini文件，用编程工具打开修改以下内容为想要的大小，然后重启该软件。
file_uploads=On
<!-- 上传文件开关 -->
upload_max_filesize = 2M
<!-- 最大上传文件大小 -->
post_max_size = 2M
<!-- post请求上传文件最大大小 -->
max_execution_time=1000
<!-- 最长执行事件 -->
max_input_time = 1000
<!-- 提交数据时间限制 -->
memory_limit=128M
<!-- 最大内存消耗 -->

区别总结

  1. GET在浏览器回退时是无害的，而POST会再次提交请求
  2. GET产生的UR地址可以被收藏，而POST不可以
  3. GET请求会被浏览器主动缓存，而POST不会，除非手动设置
  4. GET请求只能进行ur|编码，而POST支持多种编码方式
  5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
  6. GET请求在URL中传送的参数是有长度限制的，而POST没有限制
  7. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制
  8. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
  9. GET参数通过URL传递，POST放在Request body中 。
     

url

url组成结构

url为打开网页的完全的地址，例如（未包括get请求的数据，后连接？key1=value1&key2=value2&....&keyn=valuen）AJAX - XMLHttpRequest 对象，其中包括ip地址为https://www.w3school.com.cn/，ip地址是从后往前看，cn代表china，com代表商业网站，它域名为w3school。注意HTML表单和JavaScript的方法中提交的url只要不是以https://开头的，它请求的地址都会是当前打开的网页的ip地址拼接提交的url，而不是重新打开一个url。url包括ip地址和服务器下文件的地址，例中为/js/js_ajax_http.asp。

跨域问题

由于安全问题，浏览器禁止跨域访问，例如https://www.w3school.com.cn/js/js_ajax_http.asp这个网站的异步AJAX请求只能访问，该服务器下的文件内容https://www.w3school.com.cn/下内容即同一台服务器的内容（同一ip地址）。

如何解决跨域

如何解决跨域_YF-SOD的博客-CSDN博客

encodeURIComponent(str)

注意URL中不能出现中文，我们可以通过encodeURIComponent(str)，将str转换为符合要求的字符串。

JSON

JavaScript 对象表示法（JavaScript Object Notation）。

JSON.parse(str)

将类似于对象的字符串str转化为对象返回。例如str='{"name":"Bill Gates", "age":62, "city":"Seattle"}'通过该方法能转化为对象{"name":"Bill Gates", "age":62, "city":"Seattle"}。注意str的写法上属性要带有引号。

JSON.stringify(obj)

将对象obj转化为类似于对象的字符串返回。例如obj={"name":"Bill Gates", "age":62, "city":"Seattle"}通过该方法能转化为字符串'{"name":"Bill Gates", "age":62, "city":"Seattle"}'。注意obj即使属性上定义时不带引号，返回的类似对象的字符串上的属性也带有引号。

YF-SOD
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax请求 POST丨ajax简介,ajax提交数据的多种类型
灵感与学习结合-echo
01-26 4976
Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务 器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用 户的操作。同步和异步的区别同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他 操作，只能等待服务器端的响应，会刷新页面。异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将 信息更新到网页局部，整个过程页面不刷新。'''
Json String互相转换以及拼接到URL以及从URL取值
Silence_Sep的博客
04-24 4560
一、Json 转字符串 var userInfo = { id: "xxxx" loginname: "admin12" orgId: "xxxxx" orgName: "xxxxx" post: null realname: "王一" roleids: "111,110,1547718262668,1548641824182" roles: "[{"creDate":153213...
JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍
糖果墙的博客
02-21 1009
JS拼接字符串的过程中将JSON对象存到某个标签的属性中JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),bta()用法介绍案例描述实现方法方法1方法2方法3JS拼接li标签，JSON对象转字符串，双引号引发的问题解决方法1：JSON.stringfy()后再使用encodeURIComponent()方法进行编码解决方法2：JSON.stringfy()后再使用btoa()方法进行编码 JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encode
使用 $.ajax 发送 post 请求
beitian_123的博客
09-05 6948
1.摘要 刚开始学习jquery的时候，按照书上的例子发送POST请求始终失败，而发送GET请求却能够成功，在后台（java侧）使用@RequestBody将请求转换成json格式始终失败，查看了各种帖子始终不成功 。后来发现是页面转换json有问题，特将过程整理至此，希望对读者有益。 2. 通过页面发送POST请求 其代码对应如下 <!DOCTYPE html>...
微信小程序页面跳转url传参，对象数据过长问题
qq_26282869的博客
11-27 3499
小程序url传参如果是对象的话需要先用JSON.stringify()转换一下，接受页面在用JSON.parse()再转换回来。 但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。 这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.o...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十一：JSON
最新发布
01-20
在Web开发中，AJAX（Asynchronous JavaScript and XML）常用于实现页面的异步更新，JSON作为XML的替代，因其简洁性和与JavaScript的兼容性而被广泛应用。 6. JSONP（JSON with Padding）： 由于同源策略的限制，...
web前端跨域取JSON
02-04
7. **AJAX**技术：在前端获取JSON数据通常使用AJAX（Asynchronous JavaScript and XML），现在更多指的是使用XMLHttpRequest或Fetch API进行异步请求，获取JSON数据并进行处理。 在HTML5和CSS3的环境中，开发者可以...
JavaScript Ajax动态购物车代码.zip
11-04
在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于创建交互式和响应迅速的用户体验，尤其是对于电子商务网站中的购物车功能。JavaScript AJAX允许页面在不刷新整个页面的情况下与服务器进行通信...
app 请求服务器json数据实例代码
01-20
注意，由于JSON数据本身是字符串，我们需要使用`JSON.parse()`或`JSON.stringify()`方法将其转换为JavaScript对象或字符串。在本例中，我们使用了`JSON.stringify(data)`将返回的对象转换为字符串，以便在控制台中...
从ASP3.0和JavaScript调用WebService
04-06
- **AJAX技术**：JavaScript调用WebService通常采用AJAX（Asynchronous JavaScript and XML）技术，它允许网页在不刷新整个页面的情况下与服务器进行通信。 - **XMLHttpRequest对象**：同样，JavaScript也依赖...
微信小程序 页面传参对象过大
anne0000的博客
07-16 494
小程序url传参如果是对象的话需要先用JSON.stringify()转换一下，接受页面在用JSON.parse()再转换回来。 但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。 这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.obj)，在encodeURIComponent之前要用JSON.stringify()先转换数据，decodeU
微信小程序：页面跳转url传参，对象数据过长报错
Jane's Blog
08-20 1712
小程序A页面跳转B页面通过url传参时，若参数为对象（字典）需要先转成字符串（使用用JSON.stringify()转换成字符串）B页面在用JSON.parse()再转换回对象（字典）。 但是这样的传参方式遇到一个问题，对象数据长度过大时B页面在用JSON.parse()会报错。 Unexpected end of JSON input 控制台打印查看问题是发现是，字符串长度超过限制,已经做截取（大致在45KB的数据量左右会被截取）导致数据转换回来时格式不对而报错。 这时可以再添加另一个API： enco
js调用ajax以及JSON.parse()与JSON.stringify()的使用
Luke_R的博客
09-05 622
GET请求 window.onload = function(){ document.getElementsByName("username")[0].onblur = function(){ //1、获取xmlHttpRequest对象 var xmlHttpRequest = new XMLHttpRequest(); //2、打开连接 //xmlHttpRequ
ajax请求之JSON.stringify
Learning
11-20 1076
问题提出：确保后台程序无问题，通过postman能成功提交表单，但是从前台页面用ajax提交却始终执行error的回调函数，debug一下，发现postman发送请求中携带的数据格式为json，但是debug前台页面发送时时一串的attribute1=value1&amp;attribute2=value2&amp;...问题出在哪里？   后台接口：   /*Controller请求...
ajax 传字符串到后台,JSON.stringify()将JSON对象转换为字符串通过Ajax传入到后台处理...
weixin_28835789的博客
08-05 1272
搜索热词最近在做一个小小的功能模块，前台有很多的数据需要传入到后台，前台页面设计如下： 看起来不是很清楚，总之表单中的数据都要提交到后台进行处理，然后插入到数据库，而且是一起提交到后台的，实现的方法大致有两种：(在处理类似需求，如果大家有其他意见，可以一起来交流分享)1)通过表单提交，当然在后台需要为每个字段定义一个集合对象，然后在页面中使用name标志，如果使用了strut2的话就更简单了，在A...
ajax使用POST提交json数据
热门推荐
大秦铁骑
03-23 4万+
$(document).ready(function () { var schoolList={   "pageCount": "2",   "pageIndex": "1",   "sign": "1",   "uniPayId": "9dc1308bab2b4b49987a0c12dd7339f5" }  $.ajax({ t
使用 $.ajax 发送json数据示例代码（GET、POST区别）
zcc的博客
04-30 9512
一、GET、POST请求区别： 1、GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进
小程序路径参数太多导致缺失问题
wyy7293的博客
10-27 301
针对小程序跳转时携带参数太多,导致接收参数时缺失问题 encodeURIComponent(JSON.stringify(obj)) //为跳转url时的转换方法。 JSON.parse(decodeURIComponent(options.obj)) //为接收参数页面的转换方法。
Ajax、JSON及跨域问题
ailsa_csdn的博客
03-09 941
ajax的语法，以及前端跨域问题

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值