ajax

ajax：Asynchronous javascript and xml (异步javascript和xml)。

ajax并不是一种新技术,而是已有技术的集合JavaScript是核心载体

ajax优势:在不刷新网页的情况下，能够更新部分网页的数据 提升用户的体验

能够实现异步工作

 Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

 

①创建XHLHTTPRequest对象:要分为(低版本)IE 和非IE两种

IE 浏览器(IE7之前)

var xhr =new ActiveXObject('Msxml2.XMLHTTP');

非IE浏览器（chrome、firefox、opare、safair、搜狗等，包括IE7+之后):

var xhr = new XMLHttpRequest();

②XMLHttpRequest对象有了，可以发送Ajax请求了。

xhr.open(var1, var2, var3): 准备Ajax请求

参数:var1: 请求方式  get/post

  var2: 请求的后端程序地址，后端可以是 php  jsp  asp Python等等

  var3: 异步(true)/同步(false)，可选参数，默认为true

③:xhr.send(var): 发送Ajax请求

参数var: 分为两种情况。 如果是get请求，则填写null。 如果是post请求，则填写要发送到后端的数据

④接收后端返回的结果

④//onreadystatechange事件:  readyState的值每次发生变化都会触发该事件。

xhr.onreadystatechange = function(){
　　if (xhr.readyState==4){
　　//如果等于4的话，说明已经完全接收到返回数据，并且可以在浏览器中使用了，
　　//以字符串形式接收后端的返回值
　　alert（'xhr.responseText'）//PHP程序最终会被解析为一段字符串，responseText接收的就是这段字符串
　　}
}

① 创建XMLHTTPRequest对象//1. 创建XMLHttpRequest对象

function getXhr () {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //IE7+ 和 非IE 中都有 XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    return xmlhttp;
}
var xhr = getXhr();
④//onreadystatechange事件:  readyState的值每次发生变化都会触发该事件。
xhr.onreadystatechange = function(){
if (xhr.readyState==4){ //如果等于4的话，说明已经完全接收到返回数据，并且可以在浏览器中使用了，
//以字符串形式接收后端的返回值
alert（'xhr.responseText'）//PHP程序最终会被解析为一段字符串，responseText接收的就是这段字符串
}
}
②准备ajax请求
xhr.open('get','路径');
③发送ajax请求
xhr.send(null);

JSON.parse(字符串)

JSON.parse()就是将请求过来的json 数据 转换成数组或者对象

　　简单理解就是： 把引号去掉

var a = '[{"id":10001,"name":"zs","age":20},{"id":10002,"name":"ls","age":21},{"id":10003,"name":"ww","age":19}]'
JSON.paese(a)
这样a的结果就会是： [{"id":10001,"name":"zs","age":20},{"id":10002,"name":"ls","age":21},{"id":10003,"name":"ww","age":19}]

JSON.stringify() 这个与JSON.parse相反 就是将数组或者对象转换成字符串

　　简单理解就是：加上单引号

 

 

 

什么是缓存?

浏览器的请求需要从服务器获得许多 css、img、js 等相关的文件，如果每次请求都把相关的资源文件加载一次，对 带宽、服务器资源、用户等待时间 都有严重的损耗。如果浏览器将css、img、js等文件在第一次请求成功后就保存在本机上，以后的每次请求就在本机获得相关的资源文件，那么就可以明显地加快用户的访问速度，同时可以节省各种资源(带宽、服务器资源、用户等待时间)。

 

产生缓存的情况

Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。

 

get方法会产生缓存

 

 

解决缓存的方法:

解决方法有两种: 1) 前端方案: 在open准备ajax请求时，为请求的地址增加随机后缀。相当于每次请求都是新的地址

xhr.open(‘get’,’地址?’ + Math.random())

 2) 后端方案: 后端程序设置不允许缓存的头信息，php程序固定使用如下3句即可(3句最好是全部加上)。

header('cache-controller:no-cache');

header('Pragam:no-cache');

header('Expires:-1');

 

解决缓存方案：解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方：

 

1、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

3、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推荐不建议使用：​

1、ajax不支持浏览器back按钮。　　

2、安全问题 AJAX暴露了与服务器交互的细节。　　

3、对搜索引擎的支持比较弱。　　

4、破坏了程序的异常机制。　　

5、不容易调试。

 

 

同步/异步的概念

同步: ==顺序执行(自上而下执行)== 第一步---> 第二步 ---> 第三步 ....

异步: 甲在完成一系列工作时，自己完成主工作。将一些分支工作交给乙，甲此时一直在完成自己的工作，并等待乙完成的结果。乙完成后将结果返回给甲。

同步:

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步:

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在响应用户，用户体验不好。

异步，不用等所有操作等做完，就响应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

 

 

使用join模板引擎需要引入 template-web.js文件

 

timeout 和ontimeout

timeout： 请求超时设置。属性，用来设置等待响应时长，如果超过指定时长，则会触发ontimeout事件

​ xhr.timeout = 3000; // 设置等待时长为3秒

ontimeout： 事件，用来设置超过等待时长后的动作

​ xhr.ontimeout = function () {

​ alert('请求超时');

​ }

 

FormData表单对象(只能使用post方法 发送请求)

先获取form表单的DOM对象

var fm = document.getElementById(form表单)

实例化FormData对象 并将获取到的DOM对象作为参数传入

var fd =new FormData(fm)

发送ajax请求是，要将FormData作为参数传入send方法中

 

表单使用提交按钮，一定是<input type=”button”>以为其他有默认跳转行为

使用FormData一定要使用post方法发送请求，将fd作为参数传入send方法

 

name:上传文件名

type:上传文件类型

tmp_name:上传文件临时存放路径

error:错误码 如果等于0 说明没有错误

size:上传文件的大小move_uploaded_file($_FILES['f']['tmp_name'], './' . $_FILES['f']['name'])

 

 

文件上传的核心事件 xhr.upload.onprogress 该事件大约每100ms触发一次

该事件对象中包含了  loaded(已上传大小)和total(总大小)

xhr.upload.onprogress = function (evt){

计算百分比 保留小数点后面 2 位

percent = (evt.loaded / evt.total).toFixed(2);

}

toFixed(值)保留小数点后面几位数

 

 

jQuery提供了4中ajax方法:$.get() $.post() $.ajax() $.getJSON()

前三种是常用

 

$.get(var1, var2, var3, var4);

参数1: 请求的后台程序的地址 参数

2: 要发送到后台程序的数据，json对象/js对象（推荐）或者字符串 参数

3: 当readyState==4时的触发函数，该函数中有一个参数，就是后台程序返回的数据 参数

4: 设置返回数据的类型: text(默认) json xml

 

$post函数的用法和$.get一模一样，只是发送请求方式变为post

$.post(var1, var2, var3 , var4); //最标准的写法

 参数1: 请求的后台程序的地址 参数

2: 要发送到后台程序的数据，json对象/js对象（推荐） 或者 字符串 参数

3: 当readyState=4时的触发函数，该函数中有一个参数，就是后台程序返回的数据 参数

4: 设置返回数据的类型: text(默认) json xml

 

$.ajax使用JS对象来配置ajax请求

必须配置项：

url: 要请求的后台程序地址

data: 要发送到后台程序的数据 (建议使用json对象格式)

type: 请求类型 post和get 两种

dataType: 返回值类型 text(默认) 、 json 、xml 、 jsonp(跨域使用)

success: 成功完成ajax触发的事件，回调函数，其参数是后端程序的返回数据

 

其他配置项：

cache: 是否进行缓存(true/fasle)，如果设置type为get，一般设置该项为false(不缓存)。

async: 同步/异步设置，true(异步、默认) false(同步)。

timeout: 超时设置，多少ms之后扔未接收到后端返回数据，则结束本次请求。--- 进入

error方法中 error: 请求失败时的回调函数，该函数有三个参数。参数1是xhr对象，参数2是错误信息（错误信息通常是 "null", "timeout", "error", "notmodified" 和 "parsererror"），参数3是异常对象。

complete: Ajax完成时的回调函数。

beforeSend: 发送Ajax之前执行的回调函数。

contentType: 头信息设置，使用FormData对象时设置该值为false，其他情况会自动设置，不需要手动设置。

processData: 处理数据方式，使用FormData对象时设置该值为false，其他情况会自动设置，不需要手动设置。

注意: ==contentType和processData只有在使用FormData对象时设置，其余情况均不用设置==

 

 

 

 

虚拟主机

虚拟主机,也叫”网站空间”,就是把一台允许在互联网上的物理服务器划分成多个”虚拟”服务器,每一个虚拟服务器都能独立运行的一个网站

1) 修改apache配置文件(httpd.conf)，引入apache的虚拟主机配置文件(httpd-vhost.conf)

 去掉该句前的 # 号

 

 

2) 修改虚拟主机配置文件d:phpstudyApacheconfextrahttpd-vhosts.conf

 

 

3) 修改host文件 (使用管理员权限修改)c:/windows/system32/drivers/etc/hosts

 

 

==重启Apche服务器==‘

注意： www.study.com 指向 d:/phpstudy/WWW/study 目录

 

ajax跨域

ajax跨域简单来说,就是网站A去调用网站B的数据

 

但是Ajax跨域存在一个问题 --- 浏览器的同源策略，该策略会阻止ajax跨域访问同源策略（Same origin policy）是一种约定，它是浏览器的一种安全功能。 同源: 同协议，同域名，同端口； 不同源则为跨域

 

 

只要看到 ’Access-Control-Allow-Origin‘ 就说明，ajax请求被同源策略限制了。

 

 

说明：请求正常发出，数据也正常返回，但是浏览器不让使用。

 

 

解决跨域问题有三种方法:

服务器代理

cors

josnp

 

代理实现跨域

PHP有一个函数 file-get_contents 该函数能够获取到其他网站的数据

 

 

file_get_contents('http://www.baidu.com/index.html');

 

 

 

cors跨域:跨域资源共享

cors: 跨域资源共享。 同源策略是浏览器的策略。但是如果服务器允许其他网站的页面进行跨域访问，那么浏览器就不会对返回的数据进行限制了。

核心方法: 在服务器端(PHP文件中)声明不用进行同源限制

如果设置为 * 则是所有外部网站都可以获取数据header('Access-Control-Allow-origin: * ');

如果只允许某个网站访问并获取数据只需把该网站写入即可。如 : header('Access-Control-Allow-origin: 允许的网站');

 

jsonp跨域

JSONP(JSON with Padding) : 是一种解决ajax跨域访问的方案。

核心思想: 浏览器虽然有同源策略，但是 src 和 href 两个属性却可以跨域访问。 可以利用这一“漏洞”发送ajax请求。

 

$.ajax方法跨域操作----jsonp方法

$.post $.get $.ajax都能发送跨域请求。但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式

 

核心:

必须设置请求类型为get ---  type: ‘get’

必须设置dataType为jsonp --- dataType: ‘jsonp’

必须额外设置一个jsonp参数，该参数值可以是任何英文字符串，常用callback。==该函数的作用是在前端自动创建一个以该字符串为名称的函数名==

核心:  jsonp: 'callback';

 作用从前端传递一个函数名到后端。

 前端会使用该函数名定义函数，  后端需要接收该函数名返回一个函数调用的字符串