ajax基本概念：
不刷新页面，偷偷和服务器进行交互（使用http协议找服务器要数据）
必须的参数：
请求的服务器的url
请求的方式
传递的数据（如果没有，可以留空）
点击发送数据
接收服务器返回的结果
浏览器渲染为图形界面
1.form 表单提交数据
action属性：数据提交的url
method属性：表单提交的方式有两种，默认是get(可以不设置)，另外一种是post
get：get提交的数据会在url中看到，获取数据需要通过$_GET
提交的数据是有长度限制的，因为数据都在url中
post：post提交的数据在url中看不到，获取数据需要通过$_POST(post比get安全一点点)
提交的数据长度一般是没有限制的（还可以在服务端进行修改）,可以上传文件
如果是上传文件$_POST只能获取到上传文件的名字，获取不到文件
$_FILES来获取上传文件，form扁担要设置enctype,默认值是application/x-www-form-urlencoded（用于上传普通的文本值），如果上传文件要设置为multipart/form-data
submit：进行提交（想要提交数据，需要通过表单元素的name属性）
2.上传文件注意：
浏览器：form：method=post
enctype=multipart/form-data
input type=file name='xx'
服务器：php:$_FILES获取关系型数组
使用key来获取内部的关系型数组
使用name获取文件名
使用tmp_name获取路径
move_uploaded_file()移动上传文件（是一个临时文件），否则会被系统删除掉
3.ajax五大步骤
1.创建异步对象
var xhr=new XMLHttpRequest();
2.设置请求的url以及请求方法
xhr.open('get','url');
3.发送请求
xhr.send();
4.注册回调事件
xhr.onreadystatechange=function(){
5.接受服务端返回的数据
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText)
}
}
4.提交数据：
get方法提交数据，需要自己在请求路径中手动拼接
url+？+name=xxx&name=xxx
*:form表单中的name属性是必须的，ajax可以自己手动拼接
*：form表单中设置自己需要的属性(自定义属性)，通过data-name='xxx'
获取data-name的值通过dataset[‘name’]
post方法提交数据 ，发送的数据要写在send中，同时还要设置http头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('name=xxx&age=10')
5.XML
最顶部需要写一个xml的版本号<?xml version='1.0'? encoding='UTF-8'>
都是双标签
可以自己随机定义标签（不要以数字开头、不要使用中文）
必须包裹在一个顶级标签中，但是顶级标签的名字是可以自定义的
标签是可以嵌套的
获取xml
如果不做任何设置仅仅只是读取并返回，那么xml就只是字符串而已
*：服务端代码中需要使用header方法设置返回的内容是xml
header('content-type:text/xml;charset=utf-8:')
* 浏览器端ajax对象中获取返回的内容的属性是responseXML,获取的xml对象就是一个文档对项，可以使用document.querySelector()获取，
6.ajax中get方法和post方法封装：
// ajax_get function ajax_get() { // 1.创建 var ajax = new XMLHttpRequest(); // 2.open // 如果 有数据 if (数据) { // 修改url 为 xxx.php?+数据 请求的url= 请求的url+"?"+数据; ajax.open('get',请求的url) } else{ // 如果 没有数据 ajax.open('get',请求的url); } // 3.send ajax.send(); // 4.事件 ajax.onreadystatechange = function () { // 5.判断并使用 if (ajax.readyState ==4&&ajax.status==200) { console.log(ajax.responseText); } } } // ajax_post function ajax_post() { // 1.创建 var ajax = new XMLHttpRequest(); // 2.open ajax.open('post',请求的url); // 设置 content-type ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 3.send ajax.send(发送的数据) // 4.事件 ajax.onreadystatechange = function () { // 5.判断并使用 if (ajax.readyState==4&&ajax.status==200) { console.log(ajax.responseText); } } } // 将get 跟post进行合并 /* 思路分析 */ function ajax_chinese_parm() { // 1.创建 var ajax = new XMLHttpRequest(); // 判断 请求的方法 if (方法=='get') { // 判断 是否需要传递数据 if (数据) { // xxx.php?name=jack 请求的url+='?'; 请求的url+=数据 // open 并发送 ajax.open(方法,请求的url); ajax.send(); }else{ //没有数据 直接url即可 ajax.open(方法,请求的url); ajax.send(); } }else{ // 2.open ajax.open(方法,请求的url); // 设置 content-type ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 3.send ajax.send(发送的数据) } // 4.事件 ajax.onreadystatechange = function () { // 5.判断并使用 if (ajax.readyState==4&&ajax.status==200) { console.log(ajax.responseText); } } }
// 将get 跟post进行合并
/*
优化参数的传递 用户只需要 传递一个 参数即可
改参数是对象
工具函数中 直接使用 对象的属性即可
将 中文内容 替换为 对应的 参数
参数1:method 请求的方法
参数2:data 发送的数据
参数3:url 请求的url
参数4;success 请求成功之后 调用的 函数
*/
function ajax_total(option) {
// 1.创建
var ajax = new XMLHttpRequest();
// 判断 请求的方法
if (option.method=='get') {
// 判断 是否需要传递数据
if (option.data) {
// xxx.php?name=jack
option.url+='?';
option.url+=option.data
// open 并发送
ajax.open(option.method,option.url);
ajax.send();
}else{
//没有数据 直接url即可
ajax.open(option.method,option.url);
ajax.send();
}
}else{
// 2.open
ajax.open(option.method,option.url);
// 设置 content-type
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.send
ajax.send(option.data)
}
// 4.事件
ajax.onreadystatechange = function () {
// 5.判断并使用
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 调用 作为 参数 传递进来的 success
option.success(ajax.responseText);
}
}
}
// 将 自己封装的方法 添加到 一个对象中
/*
提醒用户 不要定义my_$
1.不会被轻易的覆盖
2.添加多个
调用的时候 比较统一
my_$.ajax_total
my_$.ajax_get
my_$.ajax_post
命名空间:
my_$ 在这里 称之为 命名空间
*/
var my_$ = {
ajax_total:function(option){
// 1.创建
var ajax = new XMLHttpRequest();
// 判断 请求的方法
if (option.method=='get') {
// 判断 是否需要传递数据
if (option.data) {
// xxx.php?name=jack
option.url+='?';
option.url+=option.data
// open 并发送
ajax.open(option.method,option.url);
ajax.send();
}else{
//没有数据 直接url即可
ajax.open(option.method,option.url);
ajax.send();
}
}else{
// 2.open
ajax.open(option.method,option.url);
// 设置 content-type
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.send
ajax.send(option.data)
}
// 4.事件
ajax.onreadystatechange = function () {
// 5.判断并使用
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 调用 作为 参数 传递进来的 success
option.success(ajax.responseText);
}
}
}
}
7.jquery中的ajax
get方法：$.get(url,data,callback,type(json))
*：data为对象时，浏览器会帮我们解析成字符串拼接到url中
post 方法：$.post(url,data,callback,type)
ajax:$.ajax({
url:'xxx.php',
type:'post'(默认是get方法),
data:{name:'jack'}(对象格式),
success:function(backData){
},
dataType:'json'(如果设置为json，返回的内容不是json，也是不会触发请求成功 的回调事件的 )
})