上一篇我们回顾到末班引擎,接下来继续回顾

九.XMLHttpRequest2.0

// 1.超时
xhr.timeout = 2000 ;
xhr.ontimeout = function(){ // 超时处理事件}
// 2.formData 
// FormData 对象  对表单数据进行管理
var formData = new FormData(DOM表单);
$.ajax({
    ...
    data : formData ,
    contenType : false ,
    processData : false
})

表单序列化: $('form').serialize();  可以快速将表单name和value 属性拼接成字符串,无法获取上传文件
// 3.上传文件的进度
// 所有的事件都有事件对象,事假对象中会包含该事件相关信息
xhr.upload.onprogress = function(e){
    // 进度 = 已经上传大小/总大小
    var value = e.loaded/e.total;
}

十.JSONP的原理

1. $.ajax()

dataType: 'json'

$.ajax方法中使用XMLHttpRequest 对象请求的服务器,dataType 为json返回的数据,通过JSON.parse()进行解析

dataType:'jsonp' 解决跨域问题

1. 在跨域情况下,XMLHttpRequest不能发送请求

2. 当将dataType:'jsonp' ,$.ajax() 内部使用script的属性跨域请求服务器

1.实现细节需要前端配合

jsonp json with padding 用json数据进行填充

function say(obj){ console.log(obj) }

2. 后台(php)

echo $_GET['callback'].'({"name" : "zs" , "age" : 18})';

echo say({"name" : "zs" , "age" : 18});

1. 前端先定义好函数,通过script的src属性将函数名传递给后台

2. 后台获取传递函数名,在函数名,在函数名后面拼接括号,在括号中填充json字符串,填充完成后,进行输出

3. 前端获取到后台传递方法调用,会立即执行,就可能获取后台填充的参数

注意:jsonp需要前端配合,jsonp只能以get方式发送请求

十一.浏览器向服务器发送请求的过程

1.在浏览器中输入网址,会先通过DNS将域名解析成IP,通过IP去查找服务器

2.如果请求服务器的是静态资源(js,html,css,图片),服务器会直接原样返回,交给浏览器解析渲染

3.如果请求的是php程序,在服务器会先执行php标签中php代码,php代码执行完成后,会将php的执行结果和非php带啊一起返回给浏览器有浏览器解析

十二.常用的各种插件

1.分页:juqery.pagination.js

2.时间格式化:moment.js

moment(时间).format('YYYY-MM-DD HH:mm:ss')

3.富本编辑器: wangEditor.js

十三.其他知识

1.当用户输入的事件

box.oninput = function(){ }

2.控制文件上传的类型

accpet = "image/png,image/gif"

3.图片本地预览

input.onchange = function () {
        	//获取选中的文件
			var file = this.files[0]
            //获取文件url
            var url = URL.createObjectURL(file);
            //赋值给img的src
            img.src = url;
        }

4.表单重置 : reset()

$('form')[0].reset();

5.常见的jq表单状态选择器(可用,禁用,被选中)

被选中 : $('input:checked') $('select option:selected')

禁用: $('input:disabled')

可用: $('input:enabled')

6. jq对象和DOM对象的区别

$('div') --> 结果获取了页面中所有div ---> [div div div div]

$('form').reset()

$('div')[2] 将jq对象转成DOM对象

7. 事件委托的使用场景:

对应动态生成元素用事件委托绑定事件

$('已经存在的父元素').on('事件类型','触发事件子元素',function( ){ })

十四.增删改查的思路

1.添加数据思路

1. 先写好后台接口

2. 前端请求接口

3. 请求完成后重新渲染页面

1.设计表单

2. 获取数据 $('form').serialize(); var formData= new FormData()

3. 通过ajax把数据发送给后台

4. 后台获取数据,存到数据中

5. 添加完成,重新渲染页面(渲染使用模板引擎)

2.删除数据思路

1. 获取对应数据id

2. 通过ajax吧id传给后台

3. 后台根据id进行删除

4.删除成功后,重新渲染当前页

3.更新数据思路

1.获取对应数据id

2.通过ajax把id传给后台

3.后台根据id返回对应的数据

4.把返回的数据渲染在页面中,共修改

5. 修改完成,把数据根据id更新回数据库

6. 修改后,重新渲染当前页

4.查找数据思路

1.根据查找条件,向后台发送ajax请求

2.后台根据条件,返回对用的数据

3.前端根据返回数据格式解析数据 xml json

4. 准备模板引擎,把数据渲染到页面中

5.分页思路实现过程

1.获取后台数据中数据总数

2.根据总数生成分页标签

6.实际工作中前后端分工

后台给前端提供数据和接口(对数据进行增删改查操作)

前端对数据进行渲染

WjiaoJ

发布了64 篇原创文章 · 获赞 19 · 访问量 1万+

私信关注

PHP+AJAX思想整体回顾(二)