Ajax的使用

ajax是用来做什么的？
Ajax即"Asynchronous javaScript AmdXML"(异步 javaScript和XML),是指一种创建交互式网页应用的网页开发技术
Ajax可以是网页实现异步更新

同步和异步区别
同步：浏览器在请求数据的过程中，会一直等待事件你的响应，直到返回的结果才会进行下一次操作
异步：浏览器在请求数据的过程中，不会一直等待，这段时间还可以继续其他操作

ajax使用步骤
1、把phpstudy软件Apache启动
2、把项目(文件)拉到www目录下
3、输入localhost或者127.0.0.1正常显示站点创建成功页面(服务器默认的端口号是80 localhost:80)
4、在浏览器中输入
http://localhost/www下的自己创建的文件名/编辑器里想要进去的名字

例：http://localhost/day15-1/01ajax基本概念.html

ajax get请求使用的四步法

  //获取ul的元素
    var oul=document.querySelector('ul')
 1、创建XMLHttpRequest实例对象 

    var xhr=new XMLHttpRequest()
    //2、打开 
    
    xhr.open('get','./data/1.txt',true)//第一个参数get或者post请求 第二个参数 数据url的路径  第三个参数  是否异步  默认是异步(true)
    
    //3、发送
    xhr.send()
    
    //4、注册监听事件
    xhr.onreadystatechange=function(){
        //监听ajax的状态
        if(xhr.readyState==4){
            // 监听服务器的状态  200是请求成功
            
            if(xhr.status==200){
                // console.log(xhr.responseText);
                f(eval(xhr.responseText))  //xhr.responseText 请求的数据 
                //eval() 方法  是把字符串解析成JS数据类 
            }
        }
    }	

ajax post请求使用的五步法

    //获取ul的元素
    var oul=document.querySelector('ul')
    //定义一个名字
    var str='name=张三&age=18'
    //1、创建XMLHttpRequest实例对象
    var xhr=new XMLHttpRequest()
    //2、打开
    xhr.open('post','./data/2.txt',true)
    //3、写入请求头   和get请求的区别
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    //4、发送
    xhr.send(str)
    //5、注册监听事件 
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                f(xhr.responseText)
            }
        }
            
    }
    function f(date){
        oul.innerHTML=date
    }

get请求和post请求的区别

1、get请求会被浏览器主动cache,而post不会，除非手动设置
2、get请求只能进行url编码，而post支持多种编码方式
3、get请求参数会被完整的保留在浏览器历史记录里，而post中的参数不会被保留
4、get请求在url中传送的参数是有长度限制的，3kb左右 而post理论上没有5m
5、get比post更不安全，因为参数直接暴露在url上 所以不能用来传递敏感信息

get请求和post请求的区别(正常版）
1、post相对于get较安全
2、get传参的大小是3kb左右
3、get传参跟在url后面，post传参跟在send内
4、post必须设置请求头