ajax:
在页面不刷新的情况下,请求服务器局部更新页面的数据
同步:同一时刻只能做一件事,前一件事做完在做后一件。
异步:同一时刻做多事,【实现前后端的交互】
XMLHttpRequest()
请求报文:
请求行:请求方式,请求url/协议
如果是get请求,数据就在url后面拼接过去
xhr.open("get","./路径?name=jack&age=18&a=99&b=ccc");
如果是post请求:
xhr.open("post",一个url);
请求头:客户端发送给服务器的一些额外信息
请求体:客户端传递给服务器的数据
如果是get请求:
xhr.send(null);
如果是post请求就需要在send中传递 name=jack&age=18&gender=男
xhr.send("name=jack&age=18&a=99&b=ccc");
ajax发送get请求
异步对象的基本代码模式:(get请求)
创建异步对象
var xhr = new XMLHttpRequest();
设置请求行:
//url通常是一个php文件,可以返回信息
//?给要传到后台的参数,并连接字符串
xhr.open("get",一个url);
xhr.open("get", "./路径?name=jack&age=18&a=99&b=ccc");
设置请求体:
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.status == 200 && xhr.readyState==4) {
//获取返回文本
var str=xhr.responseText;
//在什么里显示后台传递过来的数据
xx.value=str;
}
ajax发送post请求
异步对象的基本代码模式:(post请求)
创建异步对象
var xhr = new XMLHttpRequest();
设置请求行:
//?给要传到后台的参数,并连接字符串
xhr.open("post",一个url);
xhr.setRequesHeader("Content-Type","application/x-www-form-urlencoded");
设置请求体:带键值对形式的数据
xhr.send("name=jack&age=18&a=99&b=ccc");
xhr.onreadystatechange = function() {
if (xhr.status == 200 && xhr.readyState==4) {
//获取返回文本
var str=xhr.responseText;
//在什么里显示后台传递过来的数据
xx.value=str;
}
ajax处理json数据
获取json数据格式并处理的方式:【不区分get还是post】
if (xhr.status == 200 && xhr.readyState==4) {
//获取返回文本
var str=xhr.responseText;
//将json文本解析为json对象
var obj=JSON.parse(str);
//在什么显示后台传递过来的数据
xx.value=str;
}
ajax处理xml数据:
获取xml数据格式并处理的方式:
服务器端:
header("Cotent-Type:application/xml;charset=utf-8);
客户端:
if(xhr.status==200&&xhr.readyState==4){
获取返回xml文档对象
var xmlObj=xhr.responseXML;
dom常规操作
var obj1=xmlObj.getElementById("dv");
var obj2=xmlObj.querySelector("#dv2");
var items=xmlObj.querySelectorAll("item");
}
模板引擎:
用户界面与业务数据分离
用于生成特定的网页结构快
渲染数据时,代替拼接字符串操作。
对对象进行遍历,就可以取得
例:
title 对应的值 平凡之路
var key="title";
responseText="<%=" + key + "%>"; 等于 "<%=title%>"
模板:
<script type="text/template" id="navTemp">
引入插件
<script type="template-native.js"></script>
数据结构动态生成
var obj=[{}];
调用模板引擎的函数,返回值为替换之后的动态结构
var html = template(模板id,数据(对象));
var html = template("navTemp",obj);
简介语法:
var data={"name":'jack',"age":18};
<p>{{name}}</p>
<p>{{age}}</p>
var data1=[{"name":'jack',"age":18},{"name":'rose',"age":19}];
此时需要包装为对象:
var obj={"items":data1};
{{each items as value key}}
第一种写法:
<p>{{items[key].name}}</p>
第二种写法:
<p>{{value.age}}</p>
ajax思路:
function ajax(url,type,data,callback);
function ajax(option);
var $={
ajax:function(option){},
get:function(...){},
opst:function(...){}
}
使用方法:
$.ajax(){
url:
type:
data:
dataType://返回的类型,比如json,xml,text,html
success:发送请求后
timeout:
beforeSend:function(){},发送前做什么事
error:
complete:
}
同源:协议,域名,端口完全一样
跨域:不同源就是跨域,不允许进行dom操作,也不允许进行ajax请求。
解决跨域请求:
*允许所有其他的域向当前域发送请求。
header("Access-Control-Allow-Origin:*");
设置允许指定域发送请求:
header("Access-Control-Allow-Origin:http://day7.com“);
jsonp概念:
客户端让服务器返回数据的同时,并告诉服务器,要调用哪个函数,服务器就返回调用该函数的形式,并且数据作为该函数调用的参数。
开启跨域请求【需要前后端配合】(错误不存在,解决数据返回的问题)
jquery中:
前台:
dataType:"Jsonp";
后台:
请求所传递过来的函数名称:
$callback=$_GET["callback"];
读取函数:
$data=file_get_countents("nav.json");
返回调用函数的形式,在这个函数中传递前台需要的数据(拼接字符串):
echo $callback.'('.$data.')';
实现跨域请求:请求数据
天然的跨域特性:
href
src
利用script的标签src的天然跨域特性来实现跨域:返回值会以js语法解析
使用script标签的src属性的天然跨域特性:
<script>
function test(data){
这里可以处理数据data
例:console.log(data);
}
</script>
目的:服务器拿数据回来,进行处理
<script src="xx.php?callback=test"></script>
对应服务器的代码(xx.php)
<?php
$callback=$_GET["callback];
$data=某某数据;//可以是各种数据,可以来源于各种途径
echo $callback.'('.$data.')';
?>
XMLHttpRequest2.0中的新特性:
1)请求超时,自动触发:
//设置超时时间(毫秒)
xhr.timeout = 2000;
xhr.ontimeout = function(){
超时后做什么操作。
}
2)FormData对象:用于一次性收集form表单数据
var formObj=document.querySelector("form表单");
var formData=new FormData(formObj);
//可以自由的追加参数
formdata.append("address", "传智播客");
//直接作为xhr.send参传递数
xhr.send(formData);
注:
xhr此时只能是post请求
不设置请求头
formdata还可以追加数据:
formData.append("key","value");
3)监听文件上传进度:
xhr.upload.onprogress = function(e) {
//已经上传文件的大小
var current = e.loaded;
//要上传文件的大小
var total = e.total;
//根据这两个数据设置进度条的表现
var percent = current / total * 100 + "%";
测试大文件,需要去php.ini中修改
post_max_size,
upload_max_filesize
|
|