ajax

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，也是不会触发请求成功                                 的回调事件的 )

                })