原生JS实现Ajax

原生Js的实现

function ajax(options){
            var pramas = {
                url:'',
                type: 'get',
                data: {},
                success: function (data) {},
                error: function (err) {},
            }
            options = Object.assign(pramas, options)
            if(options.url){
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
                var url = options.url,
                    type = options.type.toUpperCase(),
                    data = options.data,
                    dataArr = [];
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    xhr.open(type, url, true)
                    xhr.send()
                }
                if(type === "POST"){
                    xhr.open(type,url, true)
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(dataArr.join('&'))
                }
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                        options.success(xhr.responseText)
                    }else {
                        options.error(xhr.responseText)
                    }
                }
            }
        }

        function ajax(option) {
        //新建ajax对象
            var xhr = new XMLHttpRequest()
            var meathod = option.meathod || 'GET'
            var url = option.url
            var date = option.date || {}
            var str = '?'
            for (var key in date) {
                str += key + '=' + date[key] + '&'
            }
            url += str.slice(0, str.length - 1)
            console.log(url)
            //建立连接（‘获取方式’，‘连接对象’，‘同步或异步’）
            xhr.open(meathod, url, true)
            xhr.send()//发送请求
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState)
                //当readyState为4时表示数据已经返回到服务器
                //当status的值为200时则表示服务器能返回正确的数据
                if (xhr.readyState === 4 && xhr.status === 2000) {
                    console.log(res)
                    //将获取来的数据（字符串）转为对象格式，并赋值
                    var zhi = JSON.parse(xhr.responseText)

                   
                    option.success(zhi)
                }
            }
        }

事件

鼠标事件

mouseover//鼠标经过
mouseout//鼠标离开（鼠标移入到子元素中属于鼠标离开）
mouseenter//鼠标移入
mouseleave//鼠标离开（鼠标移入到子元素中不属于鼠标离开）
mouseover//鼠标移入
mousedown//鼠标按下
mouseup//鼠标抬起
dbblock//双击
mousemove//鼠标移动

//*禁止鼠标右键菜单弹出：contextmenu
 //禁止选中文字：selectstart
  //举个栗子：
  document.addEventListener('selectstart',function(e){
  e.preventDefault();//阻止默认事件发生
  })

*e.stoppropagation();//阻止事件冒泡

键盘事件

keyup//按键弹起触发
keydown//按下
keypress//按下（但是无法识别功能键）

事件对象（event)

每一个事件都会有一个默认的事件对象，但是event存在兼容性的问题（window.event)
任何事件触发的时候，程序都会提供给我们一个事件对象event 

存储着一些与事件相关的信息

也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event  

Var  e = event || window.event;

三个坐标

event.clientX/Y                 可视区，以浏览器可视区的左上角为基准

event.pageX/Y                   以页面的左上角为基准

event.screenX/Y                 以电脑屏幕的左上角为基准

pageX/Y是有兼容性的， 

event.pageX/Y = event.clientX/Y+event.scrollTop/Left
- event.preventDefault() :   阻止默认事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation():  除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素

DOM事件级别

element.onclick=function(){}
element.addEventListener('click',function(){},false)

移动端事件

click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件



tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

new关键字

new   用来创建新的对象

1   先创建了一个自定义对象  

2   把this关键字指向刚才创建的对象

3   执行构造函数里的代码，也就是想this（已经创建的对象）添加属相和方法

4   返回this（被创建的对象）

页面高度获取

window.location//获取地址栏信息

scroolTop//页面卷出高度

document.body.clientHeight//网页可见区域高度

document.body.offsetHeight//网页可见区域高度（包括边线）

document.documentElement.offsetHeight//文档高度

清除函数绑定事件

removeEventListener('事件'，函数名)

元素的增加

appendChild
insertBefore

元素的删除

removeChoild

元素的修改

src|href|title//修改元素属性
innerHTML|innerText//修改元素内容
value|type|disabled//修改表单元素
style|className//修改元素样式

元素的查询

getElementById|getElementByTagName|getElementByClassName//Dom提供的API
querySelector|querySelectorAll//H5提供的新方法
父(parentNode)、子(children)、兄(previousElementSibing<上一个>,nextElementSibling<下一个>)

元素属性的操作

setAttribute//设置dom的属性值
getAttribute//得到dom的属性值
removeAttribute//移除属性

注册事件

on+事件//传统注册事件（具有唯一性，后面的会覆盖前面的
addEventListener()//有兼容性问题
监听对象.addEventListener(事件类型的字符串，事件处理函数<事件处理时会调用该函数>,可靠参数<是一个布尔值，默认是false>)

快排序（srot)

返回一个值，如果返回的值是小于0则a在b的前面，相反则在后面

节流

节流：
在无限下拉加载时会发送多次请求，我们需要在上一次数据加载回来之前不发送请求，直到数据回来再发送请求。

模板字符串

``//包字符串，中间可加变量用${}添加

存储

localStorage.setItem(key,value)//往数据库中存数据
localStorage.getItem(key,value)//往数据库中取数据

target和this

e.target//返回的是触发事件对象，它指向的是点击的那个对象，就返回那个对象
this//返回的是绑定元素的对象（currentTarget约等于this但是会返回绑定对象兼容性问题）