Ajax

来源：互联网发布：怎么设置淘宝店铺红包编辑：程序博客网时间：2024/06/10 22:47

表单

action 表单提交地址

method 提交方法

1 get

提交的数据通过地址栏发送，数据添加到地址栏的问号后面。

数据形式：数据名=数据值&数据名=数据值

2 post

提交的数据通过请求头发送（头部信息，能过控制台看到）

以前没有ajax时就用表单提交，现在有ajax了就用ajax提交。

Ajax是一种技术方案，但并不是一种新技术，它依赖的是现有的CSS/HTML/JavaScript，而其中最核心的依赖的是浏览器提前的XMLHttpRequery对象，是这个对象使得浏览器可以发出HTTP请求和接收HTTP响应。

ajax:AsynchronousJavaScript and XML（异步js和XML）

同步js：js的代码都是至上而下执行的，如果一块代码没有执行完毕，那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行。

XML：存储数据的一种格式（就是标签对，把数据存到标签中）

<age>18</age>…. 用起来很费劲

Json是一个对象

ajax不光能够处理XML格式的数据，还可以处理json、数组、字符串类型的数据

ajax到底能干嘛

js与后端进行交互的一种技术，通过请求协商好的接口，来获取到想要的数据（form提交页面跳转或刷新，占带宽）

优点：

传输数据时候会在本页请求服务器，不用跳转页面，从而减轻服务器压力。做到实时验证，减少用户返工率并且优化用户体验（局部刷新）

服务器安装

AJAX是基于http(https)协议，所以只能在HTTP服务器环境下运行。之前我们打开页面是在本地打开，走的是file协议。

本地安装服务器环境用wampserver

1.如果你的电脑是64位的话，安装的是32位的软件的话会有问题，提示“无法启动此程序”，因为计算机中丢失MSVCR110.dll。所以一定要安装64位的wampserver

2,.打开wampserver前最好把所有软件都关掉，特别是下载，视频播放软件

3.www目录下的文件夹不能以中文命名，但是文件里面的html可以用中文命名

Ajax数据交互流程

1.创建一个ajax对象

2.填写请求地址

3.发送请求

4.等待服务器响应

5.接收数据

实例不用表单提交数据

<body>
用户名:<input type="text" name="username" /><span></span><br/>
密码:<input type="password" name="password" />
<input type="button"value="添加" />
<script type="text/javascript">
window.onload=function(){
var inputs=document.querySelectorAll('input');
inputs[2].onclick=function(){
var val=inputs[0].value;
//1创建一个ajax对象
var ajax=new XMLHttpRequest;
//2填写请求地址
ajax.open('get','php/get.php?user='+val,true);
//3发送请求
ajax.send();
//4等待服务器响应
ajax.onload=function(){
//接收数据
var span=document.querySelector('span')
span.innerHTML=ajax.responseText;
};
};
};
</script>
</body>

返回json

Ajax请求返回来的数据是json字符串，我们不能直接对它操作，要把它转换成json对象

XMLHttpRequest

var ajax=new XMLHttpRequest

//ie6

if(window.XMLHttpRequest){

ajax=new XMLHttpRequest;

}else{

ajax=new

ActiveXObject(' Microsoft.XMLHTTP');

}

转码问题

在ie下输入框若是汉字会出现乱码需要进行转码

用encodeURL()转下码在接交

Post方法

在发送之前要加请求头

ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Get方式与Post方式的区别

get方式

1.通过地址栏信息进行数据传输，传输的大小有限制()

2.不安全，用户的所有信息都会暴露出来

3.拼接数据的时候要用encodeURL转一下码，不然有中文就会乱码

4.不用设置请求头

5.数据拼接在open方法里

6.会有缓存问题

post方式

1.通过send向服务器传输数据，理论上来说是没有长度或体积限制

2.相对来说安全，因为不直接暴露用户信息

3.不用转码，已经通过请求头设置了数据格式，不会有乱码

4.在send()的前面需要设置一个请求头（不设置要出错）

ajax.setRequestHeader(‘Content-Type’,'application/x-www-form-urlencoded');

5.数据要拼接在send方法里

6.没有缓存问题

Post发送

post发送请求的时候一定要在发送前设置一下请求头

ajax.setRequestHeade('Content-Type','application/x-www-form-urlencoded');

数据写在send里

Eg：ajax.send('user=='+val'');

同步和异步

它是执行的一种模式

同步1：当send()方法调用后会等待服务器返回信息，如果服务器一种没有响应，就会阻塞后面的代码，后面的代码就不会执行了。

2.后面的代码执行受前面的代码的影响，前面的代码没跑通，后面的代码就不会执行。

异步：

1.当send()方法调用后，就会执行后面的代码，不用等待服务器的响应

2.后面的代码执行不受前面代码的影响

readyState和状态码

ajax.readyState Ajax运行步骤(第一步捕捉不到)

它的值为4的话说明AJAX已经运行完成

0 初始化还没有调用open()方法

1 载入已调用send()方法，正在发送请求

2 载入完成send()方法完成，已收到全部响应内容

3 解析正在解析响应内容

4 完成响应内容解析完成，可以在客户端调用了

ajax.status服务器对请求的反馈(状态码)

200就是成功的，404就是错误的

onreadystatechange

readyState的值发生改变时触发的事件，只要这个值有变化就会触发

onload

所有请求成功完成触发，此时readystate的值为4

(IE678不支持)

新的XMLHttpRequest不推荐使用onreadystatechange，使用onload

status

服务器状态码，服务器返回的

http：//www.caogen8.co/thread-9224-1-1.html

跨域

两个不同域名下的数据进行交互。Ajax之所以不能跨域其实是因为XMLHttpRequest受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据

同源策略

每个网站只能读取同一来源的数据，这里的同一来源指的是主机名(域名)、协议(http/https)和端口号的组合。在没明确授权的情况下，不能读写对方的资源，它是浏览器最核心也最基本的安全功能

源：协议、端口、域名

只要不同源就跨域

协议

http超文本协议

httpsHTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全

file本地协议

ftp文件共享协议

端口

相当于酒店里一层的房间

域名

http://www.baidu.cn/

http://www.baidu.cn/c/d.html成功

http://www.baidu.cn/d/e/f.html成功

https://www.baidu.cn/a/c.html失败协议不同

http://www.baidu.cn:81/a/c.html失败端口不同

http://www.sina.com/a/b.html失败主机名不同

跨域解决办法

1、在标准浏览器下XMLHttpRequest配合后端设置一个请求权限

在php里写上header('Access-Control-Allow-Origin:*');

这个是XMLHttpRequest 2级支持的，非标准浏览器不支持

2、服务器代理

服务器文件可以访问你想要的资源，而你又能访问服务器文件，所以你就可以访问想要的资源

缺点：如果想访问的资源需求有变，对于后端的开发成本就很大

3、iframe、flash、postMessage、WebSocket

http://www.freebuf.com/articles/web/65468.html

带src属性的<script><img><iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，浏览器限制了javascript的权限，只能读不能写

jsonp(json+padding)

1、通过script标签引入某些数据，是同步模式的，只有上面的代码加载完成才能继续加载下面的代码一般在用script标签做跨域的时候，不建议将数据提前加载，应该按需加载

2、当需要数据的时候创建一个script标签，将需要的数据放在src中，通过onload去监听是否请求过来，请求完毕就调用传回来的数据（异步加载）

3、jsonp不能用post请求只能用get方式请求

阅读全文

0 0