AJAX数据提交（open）

Open（发送）

通过XMLHttpRequest ，你可以很容易的取回一个URL上的资源数据。尽管名字里有XML,，但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议。

因此不要局限于网络通信，他同样也可以做当前服务中的文件调用

Open方法的参数主要包括

DOMString method,

DOMString url,

optional boolean async,

optional DOMString user,

optional DOMString password

method格式设置

请求所使用的HTTP方法; 例如 “GET”、“POST”、“PUT”、"DELETE"等。如果下个参数是非HTTP(S)的URL，则忽略该参数。

1、下面有重点讲解GET和POST内容

2、如果获取的是非HTTP，该参数GET。

url地址

该请求所要访问的URL，同样可以请求本地的文件

如果地址是http协议的，如果需要端口号必须加上端口号。

url地址是一个比较强大的内容，如果给服务器传参不需要加密的话，可以通过url来进行传参，通常传参的方法是http://地址：端口/文件名？参数1=值1&参数2=值2

下面会详细讲解。

async设置异步或者同步，为第三个参数设置

一个可选的布尔值参数，默认为true,意味着是否执行异步操作

如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。

如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true，如果multipart 属性是true，否则将会出现一个意外。

user和password

分别为：

用户名,可选参数,为授权使用;默认参数为空string.

密码,可选参数,为授权使用;默认参数为空string.

一般数据提交给服务器有两种方式

第一种是表单提交

第一种是表单提交，通过表单submit触发，提交到form中action属性地址，使用的方法是method给出的这种方式有个缺陷，需要跳转页面。

部分内容可以进行SEO优化

第二种是通过ajax提交的

第二种是通过ajax提交的，就不能触发submit,而是通过按钮点击，直接使用ajax发送给服务端，而发送到的地址就是open中的第二个参数，按什么格式发送就是open的第一个参数，不需要跳转页面，

缺陷：部分内容无法进行SEO优化

注意：在提交数据时，这两种方式只能按其中一种方式提交（以上两种情况只能二选一）

数据提交格式：（ Method GET/POST/PUT/DELETE ）

GET格式

通过地址栏后面 ? 带入字符串，字符串格式是变量 = 值 & 变量 = 值的方式传递数据给服务器

这种方式仅仅去服务端获取，没有单独传递数据，并且从服务端获取需要内容

这个就是GET传递给服务器的数据少，而且是明文传递，只能使用字符串，并且数据无法进行多样性嵌套

如果地址是当前页面锚点是可以提交提交页面

POST格式

数据不是通过地址栏发送，通过数据握手后信道发送数据，并且会将数据转换为二进制数据发送给服务器

传送数据可以是任意复杂度数据，但是传送的数据类型，包含了字符串，二进制流其他一些格式

当数据提交传输时，会涉及到跨域的问题

因为使用表单提交时，是跳转页面，跳转就不需要考虑回来的问题，所以不牵扯跨域

但是ajax是访问别的网站并且将数据取回，这就需要考虑跨域问题

URL 表示发送的地址，如果是GET方式，可以在地址后面增 ？参数=值传递数据

open参数

open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待

open的第四个和第五个参数是用户名和密码,有些地址访问是需要用户名和密码

Form数据提交示例

ajax数据提交示例

注意：当通过ajax内使用POST格式发送数据到php时，需要在ajax内设置请求头

请求头内容：xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”)

Ajax 请求本地数据（只能读取不能改写）

Ajax请求数据时，不单单可以请求服务器数据,还可以请求本地数据

加载本地文件

可以加载本地文件，在本地文件内得到我们需要的数据

加载外部的json文件

注意只能读取,不能写入一般我们在开发项目时需要一个外部文件储存数据，在html内写入格式，然后把外部数据直接代入生成，这样的模式，方便修改和维护

加载外部XML文件

一般我们在开发项目时需要一个外部文件储存数据，在html内写入格式，然后把外部数据直接代入生成，这样的模式，方便修改和维护

XML 是全语言共通数据

缺陷是数据太大

加载图片

加载本地图片获得的数据将会是二进制数据，需要时会再次将数据合成为图片，这个样式可用于图片上传

加载本地html

加载本地html文件时，可以直接将本地html文件放在当前页面需要该html文件内的界面样式的标签内

一般用于设置头部固定导航样式，和底部固定导航样式

同步和异步

Ajax获取数据时异步进行的，数据发送到服务端，然后服务端再发送回来，需要一定的时间

打印结果：a c b

Ajax异步转同步