黑马程序员技术交流社区

标题: php&ajax [打印本页]

---

作者: z-snow    时间: 2019-5-31 15:09
标题: php&ajax
### AJAX
1、本质：是在基于http协议的基础，以异步的方式通过XMLHttpRequest对象与服务器进行通信
2、作用：在不刷新页面的情况下，向服务器发送请求，达到局部更新页面的数据。

一、 异步：
定义：某段程序执行时不会阻塞其他程序执行，表现为程序的执行顺序不依赖程序本身的书写顺序。

创建异步对象：var xhr = new XMLHttpRequest();
设置请求行：xhr.open('请求方式',url,[传递参数]);
设置请求头：xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
设置请求体：xhr.send([参数]);

面试重点注意：get请求与post请求的差异
1、get请求没有请求头
2、get请求在请求行中的url后面拼接请求参数
3、post请求需设置请求头，目的是实现参数成功传递（没有参数也可以省略，一般不省略）
4、post请求的参数放在请求体中传递
5、get限制大小约4K，post没有限制




   

ajax发送get请求
                
        
ajax发送post请求
                
        
ajax处理json数据
                
        
典型json数据格式如下：
                
        
ajax处理xml数据

典型xml数据格式如下：
XML:可扩展标记语言：主要用于描述和传递数据，标签自己定义
   
json_encode  和 json_decode 

#### ajax中的参数：
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend:function () {} 请求发起前调用 success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
序列化表单:收集表单的参数，并返回固定的格式
serialize()（即格式化成key=val&key=val）

#### 二、模板引擎:
作用：渲染数据时 代替 拼接字符串的操作
必须引入插件：

#### 三 、同源与跨域
同源：协议，域名，端口完全相同才是同源，目录名相同不算是跨域
方法一：服务器端设置
        header( 'Access-Control-Allow-Origin:*' );  //所有跨域都被允许，或：
        header( 'Access-Control-Allow-Origin:http://www.study.com');
方法二 jsonp:
原理剖析:
其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
只能以GET方式请求

#### 2.jquery中的jsonp:
dataType:
- 'jsonp' 设置dataType值为jsonp即开启跨域访问
- jsonp 可以指定服务端接收的参数的“key”值，默认为callback
- jsonpCallback 可以指定相应的回调函数，默认自动生成


#### 四、ajax XMLHttpRequest2.0
《1》1、设置超时：xhr.timeout:3000
2、监听超时事件： xhr.ontimeout = function(){}  请求超时时就会触发

《2》FormData传递参数
传递参数的方法：
- 原生ajax中get 和post传参数?name='jack'&age=12，分别写在请求行和请求体中
- jquery中ajax传参数data:{name='jack'，age=12} 或者
serialize()收集的序列化的参数 name='jack'&age=12
- formdata传参数
1、var myform = document.querySelector('#form1'); //获取到form表单
2、var formdata = new FormData(myform); //用构造函数创建formdata对象
3、formdata.append('adress', '成都'); //在formdata对象中追加传递的参数
4、xhr.send(formdata);
《3》、监听文件上传进度：
xhr.upload.onprogress = function(e){
var current = e.loaded; //已上传的文件大小
var totle = e.totle //要上传的文件大小
}
测试大文件，需要去php.in中修改以下两个配置：
post_max_size,  upload_max_filesize






#### 五、接口化开发
请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能，并且严格约束了请求参数和响应结果的格式，这样前后端在开发过程中，可以减少不必要的讨论，从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口只需要进行微调。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2