js原生代码实现ajax,原生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.οnclick=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(事件类型的字符串，事件处理函数,可靠参数)

快排序(srot)

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

节流

节流：

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

模板字符串

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

存储

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

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

target和this

e.target//返回的是触发事件对象，它指向的是点击的那个对象，就返回那个对象

this//返回的是绑定元素的对象(currentTarget约等于this但是会返回绑定对象兼容性问题)