HTML5学习小记二ajax,window.orientation,prototype.forEach

1.ajax的学习

HTML5中的ajax相当于iOS中的afnetworking;详见jQuery ajax - ajax() 方法;

对ajax使用post请求的demo练习:

function testPost(){

$.ajax({

type:"POST",//请求的类型 POST GET 无大小写区分

url:"http://www.test.com",

data:{name:"post",phone:"3112122"},//post请求的追加参数,与iOS中的字典相同;

datatype: "html",//返回数据的格式"xml", "html", "script", "json", "jsonp", "text".

beforeSend:function(){$("#msg").html("logining");},//请求之前调用的函数

success:function(data){  //请求成功返回调用的函数

$("#msg").html(decodeURI(data));

}  ,

//调用执行后调用的函数

complete: function(XMLHttpRequest, textStatus){

alert(XMLHttpRequest.responseText);

alert(textStatus);

//HideLoading();},

success :function(data){

//请求成功的处理方法

}

error: function(){

//请求出错处理

}});}

对ajax的get请求的说明:

url的不同:    url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;

在ajax请求时 防止异步请求的方法

//var imgNum = $('img').length;

//$('img').load(function() {

//if (!--imgNum) {

//}

//});

2.获取到网页滑动的方法,当滑动到底部的时候进行加载下一页

$(window).scroll(function() {

var scrollTop = $(this).scrollTop();//方法返回或元素的滚动条的垂直位置。

var scrollHeight = $(document).height();//整篇文章的高度

var windowHeight = $(this).height();//是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

if(scrollTop + windowHeight >= scrollHeight) {

orderid = $("#orderidHidden").val();

getdata(usertype, notvip, orderid);//执行的请求方法

}

});

3.  关于window.addeventlistener

当对一个对像绑定多个方法的时候,之后最后一个会生效,使用addeventlistener之后,每一个方法都是可以执行;用来解决让一个js事件执行多个函数

4.关于 window.orientation

window.addEventListener("onorientationchange" in window ? "orientationchange":"resize",function(){

if (window.orientation===180 ||window.orientation===0){

$('.lock_wrp').CSS("display","none");

console.log('这个是竖屏展示');}

if (window.orientation===90 ||window.orientation===-90){

$('.lock_wrp').css("display","block");

console.log('这个是横屏展示');

e.preventDefault();

});}});

屏幕旋转事件: onorientationchange   出自 html5屏幕旋转事件 onorientationchange

function orientationChange() {  

 switch(window.orientation) {    

  case 0:         

   alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);            break;  

    case -90:    

        alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);            break;    

  case 90:          

    alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);            break;   

 case 180:         

 alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);          break;    };

};// 添加事件监听addEventListener('load', function(){    orientationChange();    window.onorientationchange = orientationChange;});

5.removeAttr() 方法从被选元素中移除属性。

6.关于遍历数组的几种方法;参考:Array.prototype.forEach数组遍历

if(!Array.prototype.forEach){

Array.prototype.forEach = function(callback,thisArg){

var T, k;

if(this === null){

throw new TypeError("this is null or not defined")

}

var O = Object(this);

var len = O.length >>> 0;

if(typeof callback !== "function"){

throw new TypeError(callback + " is not a function");

}

if(arguments.length > 1){

T = thisArg;

}

k = 0;

while(k < len){

var kValue;

if(k in O){

kValue = O[k];

callback.call(T,kValue,k,O);

}

k++;

}

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,481评论 1 5
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,097评论 1 10
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 这本绘本买的很勉强,看名字,就觉得会是一个很俗套的森林冒险故事。不过,是我的偶像推荐的,出于对偶像的盲目信任,...
    我想我是猪懒猪阅读 1,355评论 0 0
  • 每道美食都该有她自己的故事 我的公司离市区很远,所以在不认识高姐之前,每天中午都为了吃什么而发愁。自从认识高姐以后...
    野厨橙先生阅读 2,797评论 54 29