页面http请求的几种方式

目录:

1.jQuery中的ajax请求：

$.post(url,data,fn,type)

$.get(url,data,fn,type)

2.form提交的方式，可以发起请求，采用$(’#myform’).submit(),的方式发起请求，可以在form的method中设置get还是post

3.window.open(URL,name,specs,replace),打开新页面，不刷新当前页面。默认是get请求。

4.window.location.href(url)，重新定向到新页面，并刷新打开的页面。默认是get请求。

详细解释上面的请求

1. jQuery中的ajax请求： $.post(url,data,fn,type);$.get(url,data,fn)

1.0 post请求

参数:
[post和get请求的参数
url 请求地址
data 发送的数据参数
fn 发送成功后的回调函数
type 返回数据的类型。可以是：string或者json类型]

实例:
$.post(
     'url',
     {key:value,keyOne:valueOne},
    function(data){
        // 这里是请求发送成功后的回调函数。
        // data是返回的数据，数据类型在type参数里定义！
    },
    // 默认返回字符串，设置值等于json则返回json数据
    type:'json',
)

1.2 get请求

参数:
url 请求地址
data 发送的数据参数
fn 发送成功后的回调函数
type 返回数据的类型。可以是：string或者json类型
实例:
$.get(
      'url',
     {key:value,keyOne:valueOne},
    function(data){
        // 这里是请求发送成功后的回调函数。
        // data是返回的数据，数据类型在type参数里定义！
    },
    // 默认返回字符串，设置值等于json则返回json数据
    type:'json',
)

1.3 $.ajax请求

实例:
$.ajax({
    type: "POST",// 请求方式GET POST 等等
    url: 'url',// 请求url地址
    data:  {key:value,keyOne:valueOne},
    dataType: "json",// 数据返回类型xml,html,script,json,jsonp,text
     processData: false,//  告诉jQuery不要去处理发送的数据
   contentType:"application/json;charset=utf-8",//String类型的参数,false: 告诉jQuery不要去设置Content-Type请求头
   cache:true,//默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息
    success: function(data){
        // 请求发送成功后执行的函数,data是返回的数据。
    },
    timeout: 3000,// 超时设置,如果3秒内请求无响应,则执行error定义的方法
    error: function(){
        // code
    },
    async：true //默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false
})

2.form提交的方式

2.0 表单提交方式一：直接利用form表单提交

<form action="url" method="post">

	用户名:<input type="text" name="username" /><br>
	
	密码:<input type="password" name="password" /> <br>
	
	<input type="submit" value="登录">

</form>
//上传附件时,需要设定form的enctype="multipart/form-data"并且添加

2.1 表单提交方式二：使用ajax提交

<form  method="post" onsubmit="return false" action="##" id="myForm">

	用户名:<input type="text" name="username" /><br>
	
	密码:<input type="password" name="password" /> <br>
	
	<input type="button" value="登录" onclick="login()">

</form>

$.ajax({
    type: "POST",// 请求方式GET POST 等等
    url: 'url',// 请求url地址
    data: new FormData($("#myForm")[0]),
    dataType: "json",// 数据返回类型xml,html,script,json,jsonp,text
     processData: false,//  告诉jQuery不要去处理发送的数据
   contentType:"application/json;charset=utf-8",//String类型的参数,false: 告诉jQuery不要去设置Content-Type请求头
   cache:true,//默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息
    success: function(data){
        // 请求发送成功后执行的函数,data是返回的数据。
    },
    timeout: 3000,// 超时设置,如果3秒内请求无响应,则执行error定义的方法
    error: function(){
        // code
    },
    async：true //默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false
})

2.3 表单提交方式三：使用easyui的form插件提交

function login() {
   $("#myForm").form("submit",{
	   url:"url",
	   success:function (data){
	
	   }
	   
   })

3.window.open(URL,name,specs,replace)

参数:
URL	:可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口
name:	可选。指定target属性或窗口的名称。支持以下值：
			_blank       - URL加载到一个新的窗口。这是默认
			_parent       - URL加载到父框架
			_self           - URL替换当前页面
			_top           - URL替换任何可加载的框架集
			name          - 窗口名称
specs:   height=pixels	窗口的高度。最小.值为100
			left=pixels	该窗口的左侧位置
			location=yes|no|1|0	是否显示地址字段.默认值是yes
			menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
			resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
			scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
			status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
replace:	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当									  前条目。  支持下面的值：
			true - URL 替换浏览历史中的当前条目。
			false - URL 在浏览历史中创建新的条目。

4.window.location.href(url)

javascript中的location.href有很多种用法，主要如下。

self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面
window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时，window.location.Reload()会提示是否提交，window.location.href=window.location.href;则是向指定的url提交数据

5.其他

window对象的其他属性:

window.close();关闭当前窗口

setTimeout():延迟一段时间，执行一次
setTimeout(function () {
//编辑代码
}, 1000);  //延迟1s，执行里面的函数一次

setInterval():延迟一段时间，循环执行
var time = setInterval(function () {

 }, 1000);
 
HTML DOM的document也是window对象的属性之一：window.document.getElementById(“header”);
与document.getElementById(“header”);相同

document.documentElement.clientWidth;  //获取浏览器可视区域的宽，调试器不算
document.documentElement.clientHeight;  //获取可视区域的高，调试器不算

window.open(URL,窗口名称,窗口风格) //打开一个新的窗口，并在窗口中装载指定URL地址的网页。
window.close() //close方法用于自动关闭浏览器窗口。
window.alert(提示字符串)//弹出一个警告框，在警告框内显示提示字符串文本。
window.confirm(提示字符串)//显示一个确认框，在确认框内显示提示字符串，当用户单击“确定”按钮
window.prompt(提示字符串，缺省文本)//显示一个输入框，在输入框内显示提示字符串，在输入文本框显示缺省文
window.setTimeout(代码字符表达式,毫秒数)//定时设置，当到了指定的毫秒数后，自动执行代码字符表达式
window.clearTimeout(定时器)//取消以前的定时设置，其中的参数是用setTimeout设置时的返回值。
window.setInterval(代码字符表达式,毫秒数)//设定一个时间间隔后(第二个参数)，反复执行“代码字符表达式”的内容
window.clearInterval(时间间隔器)//取消setInterval设置的定时。其中的参数是setInterval方法的返回值。
window.moveBy(水平位移量,垂直位移量)//按照给定像素参数移动指定窗口。第一个参数是窗口水平移动的像素，第
二个参数是窗口垂直移动的像素。
window.moveTo(x,y)//将窗口移动到指定的指定坐标(x,y)处。
window.resizeBy(水平,垂直)//将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时
window.resizeTo(水平宽度,垂直宽度)//将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。
window.blur()//从窗口中移出焦点。当与focus方法合用时必须小心，因为可能导致焦点
window.focus()//使窗口中得到焦点。当与blur方法合用时必须小心，因为可能导致焦点不断移进移出。