AJAX

概述

1、AJAX:异步 JavaScript 和 XML,Asynchronous JavaScript And XML

2、创建交互式网页应用的网页开发技术

3、浏览器通过 JavaScript 异步发起请求,局部更新页面的技术

(1)局部更新:浏览器地址栏不会发生变化,不会舍弃原来页面的内容

(2)异步: 异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程

 

JavaScript 发起 AJAX 请求示例

function AJAXRequest() {
    //创建SMLHttpRequest对象
    var xmlHttpRequest = new XMLHttpRequest();
    //绑定onreadystatechange事件,处理请求完成后的操作
    xmlHttpRequest.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            
        }
    };
    //调用open方法设置请求参数
    xmlHttpRequest.open(method, url, async);
    //调用send方法发送请求
    xmlHttpRequest.send();
}

XMLHttpRequest 对象

1、Ajax 的核心

2、所有现代浏览器(Chrom、IE7+、Firefox、Safari、Opera)都支持 XMLHttpRequest 对象

3、XMLHttpRequest 对象用于同幕后服务器交换数据,这意味着可以更新网页的部分,而不需要重新加载整个页面

4、创建 XMLHttpRequest 对象

var = new XMLHttpRequest();

5、XMLHttpRequest 对象方法

方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(methodurlasyncuserpsw)

规定请求

method:请求类型 GET 或 POST

url:文件位置

async:true(异步)或 false(同步)

user:可选的用户名称

psw:可选的密码

send() 将请求发送到服务器,用于 GET 请求
send(string) 将请求发送到服务器,用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

6、XMLHttpRequest 对象属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState

保存 XMLHttpRequest 的状态。

0:请求未初始化

1:服务器连接已建立

2:请求已收到

3:正在处理请求

4:请求已完成且响应已就绪

responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status

返回请求的状态号(HTTP 状态消息)

statusText 返回状态文本(比如 "OK" 或 "Not Found")

7、调用 send() 之前,必须绑定 onreadystatechange

8、open(),选择异步

 

jQuery 中的 AJAX 请求

1、$.ajax(url,[settings])

(1)通过 HTTP 请求加载远程数据

(2)jQuery 底层 AJAX 实现,简单易用的高层实现见 .get.post 等,$.ajax() 返回其创建的 XMLHttpRequest 对象,大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性

(3)最简单的情况下,$.ajax() 可以不带任何参数直接使用

(4)注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置

(5)url:一个用来包含发送请求的URL字符串

(6)settings:AJAX 请求设置,所有选项都是可选的

2、$.post(url,[data],[fn],[type])

(1)通过远程 HTTP POST 请求载入信息

(2)这是一个简单的 POST 请求功能以取代复杂 .ajax使.ajax

(3)url:发送请求地址

(4)data:待发送 Key/value 参数

(5)callback:发送成功时回调函数

(6)type:返回内容格式,xml、html、script、json、text、 _default

3、$.get(url,[data],[fn],[type])

(1)通过远程 HTTP GET 请求载入信息

(2)这是一个简单的 GET 请求功能以取代复杂 .ajax使.ajax

(3)url:待载入页面的URL地址

(4)data;待发送 Key/value 参数

(5)callback:载入成功时回调函数

(6)type:返回内容格式,xml、html、script、json、text、 _default

4、$.getJSON(url,[data],[fn])

(1)通过 HTTP GET 请求载入 JSON 数据

(2)url:发送请求地址

(3)data:待发送 Key/value 参数

(4)callback:载入成功时回调函数

5、表单序列化

(1)serialize():获取表单中所有表单项的内容 ,并以 name=value&name=value 的形式,进行字符串拼接

posted @   半条咸鱼  阅读(27)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示