js事件简单复习和AJAX的了解

最新推荐文章于 2021-01-18 17:03:41 发布

七月是我的生日

最新推荐文章于 2021-01-18 17:03:41 发布

阅读量109

点赞数

分类专栏： JS学习

本文链接：https://blog.csdn.net/qq_43955202/article/details/97616349

版权

JS学习专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.js事件
绑定js事件的三种方法：
1.elem.on*** = function(){}

<script>
var div = document.getElementsByClassName('box')[0];
div.onclick = function(){
console.log("a");
}
</script>

兼容性好，但是一个元素的同一个事件只能绑定一个事件处理程序。
2.obj.addEventListener(事件类型，处理函数，false){}

<script>
var div = document.getElementsByClassName('box')[0];
div.addEventListener('click',function(){
console.log("a");
},false)
div.addEventListener('click',function(){
console.log("a");
},false)   
</script>

IE9一下不兼容，可以给一个对象的一个事件绑定多个事件处理函数。
3.div.attachEvent(on + type,function(){})

div.attachEvent("onclick",function(){
console.log('a');

js分装函数

!-- 事件绑定兼容性方法 -->
<script>
function addEvent( elem, type, handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false)
}
else if(elem.attcahEvent){
elem.attcahEvent('on' + type, function(){
handle.call(div)
})
}
else{
elem['on' + type] = handle;
}
}
function handle(){
console.log('a');
}
var oDiv = document.getElementsByClassName('box')[0];
addEvent( oDiv , 'click', handle);
</script>

代码实测：

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background: red;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">

</div>
</body>
<script>
var oDiv = document.getElementsByClassName('box')[0];

//onclick 事件：
oDiv.onclick = function(){
alert('a');
}
oDiv.onclick = function(){
alert('b');
}
// onclick 事件不能给同一个事件绑定多个事件处理程序，如上第二个会覆盖掉第一个函数。
//解除事件 ： oDiv.onclick = null;


//addEventListener 事件监听：
oDiv.addEventListener('click',function(){
alert("让你手贱");
},false)
oDiv.addEventListener('click',function(){
alert("点击有惊喜")
},false)
//addEventListener 时间可以给同一个事件绑定多个事件处理程序，如上两个function的内容可以依次出现
//解除事件 ： oDiv.removeEventListener('click',function(){},false);

//attachEvent 事件（IE）独有
oDiv.attachEvent('onclick',function(){
alert('a');
})
//解除事件 ： oDiv.detachEvent('on'+type,function(){})

//js 封装事件函数
function addEvent(elem,type,handle){
if(window.addEventListener){
elem.addEventListener(type,handle,false);
}
else if(window.attachEvent){
elem.attachEvent('on'+type,function(){
handle.call(elem);
})
}
else{
elem['on'+type] = handle;
}
}
function handle(){
alert('a');
}
//调用封装函数
addEvent(oDiv,'click',handle);
</script>
</html>

2.ajax
一、xhr取得响应
1、responseText:获得字符串形式的相应数据。
2、responsXML:获得XML形式的相应数据。
3、status和statusText：以数字和文本形式返回http状态码。
4、getAllResponseHeader()：获取所有的响应报头。
5、getResponseHeader()：查询响应中的某个字段的值。
6、readyState属性：响应返回成功的时候得到通知。
（1）0：请求未初始化，open还没有调用。
（2）1：服务器连接已建立，open已经调用了。
（3）2：请求已经接收，也就是接收到头信息了。
（4）3：请求处理中，也就是接收到响应主体了。
（5）4：请求已完成，且响应已就绪，也就是响应完成了。
二、典型的xhr建立ajax的过程。（涵盖了ajax的大部分内容）
1、new一个xhr对象。
2、调用xhr对象的open方法。
3、send一些数据。
4、对服务器的响应过程进行监听，来知道服务器是否正确得做出了响应，接着就可以做一些事情。比如获取服务器响应的内容，在页面上进行呈现。

var request;
if(window.XMLHttpRequest){
  request=new XMLHttpRequest(); //IE7+,...
}else{
  request=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5


用XHR发送请求：
open(method,url,async) 调用XHR对象，async表示同步还是异步，默认为true(异步)；
send(String)   发送请求。


request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //必须写在open和send中间
request.send("name=“tom&sex=man");

get/post请求的区别：


1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。


2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。


3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。


get请求和post请求在服务器端的区别:


4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数

七月是我的生日

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件简单复习和AJAX的了解

1.js事件绑定js事件的三种方法：1.elem.on*** = function(){}<script>var div = document.getElementsByClassName('box')[0];div.onclick = function(){console.log("a");}</script>兼容性好，但是一个元素的同一个事件只能绑定...
复制链接

扫一扫