前后台交互：跨域以及PHP与Ajax的配合使用

【不想标注哪个是重点，真心感觉都是重点的一片博文！】

一、前言

有关于前后台交互的问题，近来粗略的研究了一下，得到了一些自我感觉还挺有用的知识点，今天把它写下来跟大家分享，哈哈，欢迎互相交流，共同学习共同进步。好了，闲话就不多说了，现在开始上干货~

二、服务端主要完成的功能

1.接收前台提交的数据

2.对前台提交的数据进行处理

3.将处理过得信息返回给前端

4.存储信息（存储信息的方法）

三、数据传送的主要方式

1.GET方式

① get传输的数据用?拼接在链接后面

② 大小受限制，约4k左右

③ 且安全性极差

2.POST方式

① post方法在传送数据上理论上没有限制

② 传输的数据存储在http请求头的主体部分

③ 存储空间比get方法大，且安全性相对来讲也比get方法高

④ 要保证安全的话，可以选择HTTPS协议

四、数据提交方式

1.在url链接地址上使用问号传达

这种方式只有一种传送方式---GET

2.Form表单提交

① 可以实现GET和POST两种传送方式

② 表单可以实现跨域提交数据

③ 需要注意的是：可以使用iframe的方式可以实现局部刷新，但是iframe不支持跨域

3.通过Script标签的src属性

① 只能实现get方式，因为是通过src传递数据

② 可以独立完成局部刷新，并且支持跨域

4.JSON和JSONP的区别

① JSON：是一种字符串，并且可以通过JSON.parse()的方式，把json格式的字符转换成json对象

② JSONP：是一种跨域请求方式，只支持get方式提交

向服务器请求的时候，同时提供给后台一个回调函数名，服务器返回数据的时候，将数据包裹在回调函数名内返回给前端，由于我们使用的是script标签，浏览器一旦接收到返回数据，立即执行该函数。

五、Ajax的使用

1.XHR对象，原生版的Ajax

xhr（俗称小黄人，O(∩_∩)O~），全名XMLHttpRequest

ajax的onload方法是数据接收完毕后执行的函数。

2.FormData，模拟表单对象，通常与原生版Ajax搭配使用，网后台传数据

formData的append()方法，有两个参数，第一个是传给后台的参数名；第二个是对应的值。

XHR和FormData两者的结合使用，请看下图详解：

看过上图应该就已经很清晰了吧，ok，下面我们来说说jq版的Ajax

3.jQuery版的Ajax：是对XMLHttpRequest对象的封装，同时也省去了很多麻烦

当然前提是，你需要有一份JQ文件，可以自己去官网上去下载一份。

点击这个网址：JQ文件下载

其基本方法就是$.ajax()，参数是一组对象

基本上它有七种方法：

① url：请求的链接地址

② data：发送的数据，一般以对象的方式

③ dataType：返回的数据类型，默认text文本类型，一般可设置为json,jsonp,html,xml等

④ type：请求方式，get和post

⑤ async：同步还是异步，默认异步true，同步false，同步会造成页面卡顿

⑥ success：function(){}，请求成功的回调函数

⑦ error：function(){},请求失败的回调函数

ok，我们来分别看看以下三种类型：

返回数据类型为JSON：不可跨域，支持get和post两种方式。

GET方式：这种方式，data的值一般可以直接拼接在url之后

POST方式：

返回数据类型为JSONP：可跨域，但是只支持get一种传达方式

六、跨域以及浏览器页面局部刷新整理

浏览器局部刷新：

① iframe方式

② AJax方式

③ Script方式

跨域：

① from表单

② Script标签

③ JSONP，与script和回调函数配合