ajax的基本代码模式（get请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
var url = "server.php?name=jack&age=18&a=99&b=ccc";
xhr.open("get", url);
xhr.send(null);
xhr.onreadystatechange = function(){
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本
}
}
ajax的基本代码模式（post请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
xhr.open("post", "server.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=jack&age=18&a=99&b=ccc"); //send中带数据
xhr.onreadystatechange = function(){
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本
}
}
获取json数据格式并处理的方式：
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本（假设是json文本）
var obj = JSON.parse(str); //将json文本解释为json对象
}
获取xml数据格式并处理的方式：
//服务器端：
header("Content-Type: application/xml; charset=utf-8");
//客户端：
if( xhr.status == 200 && xhr.readyState == 4){
var xmlObj = xhr.responseXML; //获得返回xml文档
var obj1 = xmlObj.getElementById("dv");
var obj2 = xmlObj.querySelector("#dv2");
var items = xmlObj.querySelectorAll("item");
}
》》》》》》》》》》》》》》》》》》
删除用户的代码思路
》》》》》》》》》》》》》》》》》》
list.php：
<a href="del.php?id=1" >删除</a>
<a href="del.php?id=2" >删除</a>
<a href="del.php?id=3" >删除</a>
del.php:
<?php
$id = $_GET['id'];
$sql = "delete from xx表 where id= $id ";
$res = opt($sql);
if($res){
echo '成功';
header("Location: list.php");
}else{
echo '失败';
}
?>
》》》》》》》》》》》》》》》》》》
编辑用户的代码思路:
》》》》》》》》》》》》》》》》》》
list.php：
<a href="edit.php?id=1" >编辑</a>
<a href="edit.php?id=2" >编辑</a>
<a href="edit.php?id=3" >编辑</a>
edit.php：
刚刚点击编辑进来的时候：
if($_SERVER['REQUEST_METHOD']==='GET' && isset($_GET['id'])){
//就去数据库中找出当前要修改的用户的信息，并“填充”到表单中展示出来。
$id = $_GET['id'];
$sql = "select * from xx用户 where id=$id";
$result = getData($sql);
该结果是一个二维数组，类似这样：
array(
0 => array(
'id' => 8,
'name' => 'jack',
'age' => 18,
.....
)
)
$value = $result[0];
然后，在表单中，类似这样：
<Input type="text" name="username" value="<?php echo $value['name'] ?>" />
}
else if($_SERVER['REQUEST_METHOD']==='POST'){
//此时就代表表单提交了，然后就去更新数据库数据，最后返回
$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$gender = $_POST['gender'];
$sql = "update xx表 set name='$name', age=$age, gender='$gender' where id=$id";
$result = opt($sql);
if($res){
echo '成功';
header("Location: list.php");
}else{
echo '失败';
}
}
jQuery中的ajax：
$.ajax({
type: '请求方式',
url: '请求的地址（接口地址）',
data: {name:'jack',age:18}, //也可以是这样的数据："name=jack&age=18&gender=女"
dataType: json, //或text，xml, html, jsonp
timeout: 2000, //超时时间
//发送ajax请求之前要做的事情，如果该方法返回false，则不发送请求
beforeSend: function(){ },
success: function(){},
error: function(){}, //出错之后的操作
complete: function(){} //不管成功还是失败都要做的操作
});
jQuery中对form表单数据的“序列化”处理：
var data = $(某表单).serialize();
//此时，该表单中的数据，就被处理成类似这样："name=jack&age=18&gender=女"
artTemplate 模板引擎 ：
基本代码模式：
1，引入相关模板引擎文件（template-native.js或template.js）
2，建立模板，代码形式类似如下：
<script type="text/template" id="模板ID">
这里写具体的模板代码，其实就是 html代码 和 模板代码 的混编结构
</script>
说明：
原生语法的边界符：<% %>
简洁语法的边界符：{{ }}
3，使用template()函数将数据传入到模板，会得到纯html代码：
var html = template("模板ID", 对象数据);
注意：如果是对象，直接传入，如果是数组，包装为对象再传入。
jsonp的一个总体理念：
客户端让服务器返回数据的同时，
并告诉服务器，要调用哪个函数，
服务器就返回调用该函数的形式，并且数据作为该函数调用的参数
可以理解为：服务器最终就是返回一条js函数调用语句，类似如下：
xxx函数(数据);
具体代码：
客户端写法（jQuery）
$.ajax({
url : 请求地址,
data: 请求时要发送的数据,
dataType: "jsonp",
//成功后要做的事
success : function(){ .... }
})
客户端写法（原生js）
function test( data ){
console.log(data);//处理数据
}
var script = document.createElement("script");
script.src = "xxx.php?callback=test";
document.body.append(script);
服务器端：
<?php
$callback = $_GET['callback'];
$arr = array(....); //数据
$data = json_encode($arr);
echo $callback . "(" . $data . ")";
?>
XMLHttpRequest 2.0中的新特性：
1）超时特性：
xhr.timeout = 2000; //设置超时时间（毫秒）
//如果超时了，怎么处理
xhr.ontimeout = function(){ ... }
2）FormData对象：用于一次性收集form表单数据
var formObj = document.querySelector("form表单");
var formData = new FormData(formObj);
//然后直接作为xhr的send参数：
xhr.send( formData );
细节：
2.1）xhr此时只能是post请求
2.2）xhr此时无需设置请求头
2.3）FormData还可以追加数据，形式为：
formData.append('key', "value");
3）监听文件上传进度：
xhr.upload.onprogress = function(e){
var current = e.loaded; //已上传 的 数据大小
var total = e.total; //要上传的总数据大小
//然后就可以去根据这两个数据设定进度条的表现了
}
提示：
测试大文件，需要去php.in中修改以下两个配置：
post_max_size, upload_max_filesize
|
|
收藏
淘帖
踩
