1.Ajax简要介绍
Ajax 是指一种创建交互式网页应用的网页开发技术，异步JavaScript和XML
关键点 异步 不需要页面跳转 局部刷新
核心：基于http协议以异步的方式通过XMLHttpRequest对象，向服务器进行通信
作用：在页面不刷新的情况下，请求服务器，实现局部的渲染数据
优点：提高效率
异步：某段程序的执行不会影响其他程序的执行 代码的执行顺序不依赖书写顺序
异步对象：1.发送请求 2.把处理结果带回来
2.发送请求相关知识
请求报文：
请求行 请求方式 url 协议
请求头 客户端发送给服务器的一些额外信息
请求体 客户端传递给服务器的数据
响应报文：
响应行 相应状态码 200表示响应成功
响应头 服务器返回给客户端的一些其他信息
响应体 服务器返回给客户端的数据
以XMLHttpRequest发送请求及将处理结果带回的步骤
1.创建异步对象
2.设置请求报文
请求行：open（请求方式，url）
get请求，如果有参数，需要在url后面拼接参数
请求头 setRequestHeaders
get请求不需要设置请求头
post请求需要设置请求头 setRequestHeaders('Content-Type’
请求体 send(键 = 值)
get请求不需要设置请求体，post请求需要设置请求体
3.响应
当异步对象的响应状态发生改变的时候会触发事件 onreadystatechange
一个成功的响应应该包括两个方面：服务器成功响应 ，数据已经返回到客户端并且可以使用。
获取返回的数据 xhr.responseXML 获取xml文件，document，类似于dom结构，可以使用dom的方式获取数据
xhr.responseText 获取的如果是字符串就直接使用，如果是字符串（里面是数组）就要用JSON.parse()转换为数组或者对象，如果最外层是[]那就转换为数组，如果最外层是{}那就转换为对象
异步对象的响应状态分为五种情况：
“0” 创建了异步对象，但还没有真正的发送请求
“1”调用了send方法，正在发送请求
“2” send方法执行完毕了，已经收到服务器的响应内容，原始内容，还不可以使用
“3” 正在解析数据
“4” 响应内容解析完毕，可以使用
所以在接受返回数据之前要进行判断
客户端渲染（浏览器渲染）
1.向服务器请求html静态页面
2.服务器返回所请求的html页面
3.浏览器发现里面有相应的js代码，那么就执行
4.让异步对象再次发送数据请求
5.服务器会返回相应的数据
6.在html页面中根据数据动态生成页面结构
7.渲染显示
服务器端渲染
get请求的案例
php文件
html文件
post请求的案例
get文件
post
封装函数
jquery当中的ajax
1.jquery当中ajax的详细介绍
$.ajax({这个里面传入一个字面量对象})
type：发送请求的类型，通常这个值要参考后端文件进行设置
url：发送请求的地址
data：发送给服务器的参数
timeOut:请求超时 设置的时间单位为毫秒
dataType： 可以设置服务器返回数据的格式
beforeSend：发送请求之前的调用，在这个回调中我们可以进行一些请求之前的相关操作，一般用来做表单的相关验证，在这个回调函数中，如有return false ，本次请求终止
success:响应成功之后的回调函数
error:错误响应是的回调，e为参数为报错信息
complete: 响应完成时调用（包括成功和失败）实现一些全局成员的释放，或者页面状态的重置
serialize（）把表单内部所有带name属性的表单元素value进行拼接成字符串
key=value&key=value;
$("#表单的id“) .serialize()
Ajax可以接受两种类型的参数：1.对象 2.参数格式的字符串
get请求
$.get({url,data,success,dataType)
post请求
$.post({url,data,success,dataType)
注册案例demo
1.获取验证码
2.验证用户名
3.完成最终的提交
2.模板引擎的引用 art-template
使用的步骤：1.引入art-template的文件，原生和简洁的文件名是不一样的
2.创建模板，标签是script，对类型和id都要进行设置，type一定不能是js
3.进行调用 template("模板id“，数据（数据必须是对象，如果不是对象就要伪装成对象）)，这个函数有返回值，返回值是一个动态的结构。
原生语法
1.逻辑表达式 ：<% %>符号包裹起来的是逻辑表达式
2.输出表达式：<%= %> 等号和百分号之间是不能有空格的 对内容编码的输出
简易语法
1.逻辑表达式 ：{{ 与}} 符号包裹起来的语句则为模板的逻辑表达式
2.逻辑表达式 ：{{content}}
3.条件表达式
{{if条件}}
<p>内容</p>
{{else if }}
<p>内容</p>
{{else}}
{{/if}}
4.循环表达式无论数组或者是对象都可以用each进行遍历
{{each list as value index}}
<li>{{value.user}}</li>
{{/each}}
相应的小案例
1.生成动态小页面的案例：引入文件 创建模板
原生方法的创建动态的结构
简易方法的创建动态的结构
实现跨域请求
相关基础知识介绍：
页面中有几个标签允许跨域请求资源 a链接的href、 img的src 、link的href script的src
1.浏览器的同源限制。同源必须要域名协议 端口都相同，如果协议和端口造成的不同源，前端是无法解决
2.跨域并不是请求发不出去，请求可以发出去，服务端能收到请求并且返回数据，只是返回回来的数据被浏览器拦截了。
3.所有的跨域必须要经信息提供方的允许,如果未经允许即可获得的话，那是因为浏览器同源策略出现了问题
实现跨域的两种的方式
1.服务端对响应头进行设置
header('Access-Control-Allow-Origin:设置想要获取的路径')
2.通过jsonp的方式
jsonp的实现原理 ?
利用了script标签的天然跨域特性，在发送请求的时候传递了一个函数给后台，后台最后以参数调用的方式返回数据，前端在另外一个的script标签内部创建相同的函数，来接受后台返回过来的参数
jsonp实现跨域请求和ajax请求本质不一样：jsonp是通过script来发送跨域请求的，请求方式就是get请求，但ajax是通过XMLHttpRequests实现请求的，并且可以设置请求的方式
为什么jsonp只能发送get请求？
jsonp实现跨域请求，并不是通过异步对象实现，是通过script标签实现的，因此不能设置请求方式，标签的默认请求方式就是get
既然script可以实现跨域请求，并且接受到数据，为什么后端不直接给前端返回数据，而是返回调用？
script标签确实可以实现跨域请求，并且获取到数据，但是没有办法接受返回回来的数据，所以就有人想到，返回一个调用，那么只需要在另外一对script标签中，声明一个同名的函数体进行接受就可以了，后续的处理也是在这个函数当中
3.XMLHttpRequest 2.0
timeout: 可以当做属性，设置请求超时，也可以当做事件，请求超时的事件,单位是毫秒
eg: timeout:3000 timeout = function(e){console.log(e)}
formData: 类似于表单序列化，收集所有带有name属性的表单值，并且拼接成字符串
步骤： 1.通过id获取到表单 var myform = document.getElementById('#myform')
2.var formdata = new FormData(myform)
3. send(formdata );
formdate还有一个功能就是可以自由追加参数 formdata.append("address","武汉")
重点：只能以post方式传递，浏览器会自动设置请求头，一定不能再添加请求头，要不然会是数据无法传递
多个文件的上传：该文件上传标签应该添加 multiple, 并且文件name值后面追加一个中括号，
eg: name = files[]
onprogress上传进度:重点，该事件一定一定要在请求发送xhr.send()之前设置
xhr.upload.onprogress = function(e){ var current = e.loaded var total = e.total, var percent = (current/total * 100) +"%" 然后再设置标签的样式
xhr.upload.onprogress 监听文件的上传进度
JSON文件
特点：1.一组花括号表示一个对象，一个对象通过键值对写入一堆相关数据
2.一组方括号表示一个数组，多组对象通过数组的方式装载
3.对象的所有属性都必须加上双引号，值没有undifined
4.文件后缀名为.json,json文件格式的数据内不允许写注释
操作json的方法
JSON.parse() 将json格式的字符串转换为数组或者对象
JSON.stringify() 将字面量对象或者数组转换为json格式的字符串
XML文件
文件特点：
1.文件后缀名必须得为.xml格式
2.必须得在头部声明，相当于doctype声明
3.内容都以双标签包裹，可以嵌套和并列，不能交叉
4.标签名称以字母和下划线，叫什么，多长的名字都无所谓
头部的声明
网友评论