码迷，mamicode.com
首页 > Web开发 > 详细

JS 操作 AJAX

时间：2015-09-03 20:18:25      阅读：200      评论：0      收藏：0      [点我收藏+]

标签：

JS 操作 AJAX

JS 操作 AJAX

API

onreadystatechange 指定当 readyState 属性改变时的事件处理句柄
readyState 返回当前请求的状态
responseBody 将回应信息正文以 unsigned byte 数组形式返回
responseStream 以 Ado Stream 对象的形式返回响应信息
responseText 将响应信息作为字符串返回
responseXML 将响应信息格式化为 Xml Document 对象并返回
status 返回当前请求的 http 状态码
statusText 返回当前请求的响应行状态
abort 取消当前请求
getAllResponseHeaders 获取响应的所有 http 头
getResponseHeader 从响应信息中获取指定的 http 头
open 创建一个新的 http 请求，并指定此请求的方法、URL 以及验证信息(用户名/密码)
send 发送请求到 http 服务器并接收回应
setRequestHeader 单独指定请求的某个 http 头

readyState:
0: unset
1: opened
2: headers_received
3: loading
4: done

同步和异步

<script type="text/javascript">
   var xhr = new XMLHttpRequest();
   xhr.open(‘get‘, ‘test.php?id=2‘, false);
   xhr.send();
   alert(xhr.responseText);
</script>

if (!empty($_GET[‘id‘])) {
    echo ‘id = ‘, $_GET["id"];
} else {
    echo ‘fail‘;
}

open 的第三个参数, 表示是否使用异步, false 表示使用同步

如果上面的 js 代码, 使用 true, 也就是异步, 那么将会 alert ‘‘

异步表示函数还没有执行完成, 可以继续执行 alert(xhr.responseText), 那么 responseText 还没来得及返回

同步和异步的就像是打电话叫人办一点事, 如果是以同步的方式, 那么你将一直打电话直到对方接听, 回答等等; 如果是异步, 那么你就只需要发个信息等待对方回应

所以上面的代码我们以同步的方式进行的话, alert 的那一行代码 不会那么快返回, 而是等 send 完全执行完之后, 所以程序可以正常的执行

异步如何实现

异步不阻塞
js 只有一个线程, 以队列的方式执行 (实现 ‘多个任务‘ 就是使用异步来 ‘插队‘)

ajax / text

server

test1.php

<?php
header(‘content-type: text/plain; charset: utf-8‘);
if (isset($_GET[‘num‘])) {
    echo ‘get: ok num = ‘, $_GET[‘num‘];
}
if (isset($_POST[‘num‘])) {
    echo ‘post: ok num = ‘, $_POST[‘num‘];
}

get

test1.html

var request = new XMLHttpRequest();
var url = ‘test1.php?num=‘ + 123;
request.open(‘GET‘, url, true);
request.send();
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var data = request.responseText;
            alert(data);
        } else {
            alert(‘fail: ‘ + request.status + ", " + request.statusText);
        }
    }
}

post

test1.html

var request = new XMLHttpRequest();
request.open(‘POST‘, ‘test1.php‘, true);
request.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
request.send(‘num=123‘);
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            alert(request.responseText);
        } else {
            alert(‘fail: ‘ + request.status + ‘, ‘ + request.statusText);
        }
    }
}

ajax / json

server

test2.php

<?php
// header(‘content-type: text/javascript; charset: utf-8‘);   # 这种写法也是支持的
// header(‘content-type: text/plain; charset: utf-8‘);        # 这种写法也是支持的   
header(‘content-type: text/json; charset: utf-8‘);
if (isset($_GET[‘num‘])) {
    echo ‘{"res": "get ok! this is json data! num = ‘ .$_GET[‘num‘]. ‘."}‘;
}
if (isset($_POST[‘num‘])) {
    echo ‘{"res": "post ok! this is json data! num = ‘ .$_POST[‘num‘]. ‘."}‘;
}

get

test2.html

var request = new XMLHttpRequest();
var url = ‘test2.php?num=‘ + 123;
request.open(‘GET‘, url, true);
request.send();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var data = JSON.parse(request.response);
            alert(data.res);
        } else {
            alert(‘fail: ‘ + request.status + ", " + request.statusText);
        }
    }
}

post

test2.html

var request = new XMLHttpRequest();
var url = ‘test2.php‘;
request.open(‘POST‘, url, true);
request.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
request.send(‘num=123‘);
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var data = JSON.parse(request.response);
            alert(data.res);
        } else {
            alert(‘fail: ‘ + request.status + ‘, ‘ + request.statusText);
        }
    }
}

ajax / xml

server

<?php
header(‘content-type: text/xml; charset: utf-8‘);
if (isset($_GET[‘num‘])) {
    echo ‘<mes><res>this is get data and num = ‘.$_GET[‘num‘].‘</res></mes>‘;
}
if (isset($_POST[‘num‘])) {
    echo ‘<res>this is POST data and num = ‘.$_POST[‘num‘].‘</res>‘;
}

get

test3.js

var request = new XMLHttpRequest();
var url = ‘test3.php?num=‘ + 123;
request.open("GET", url, true);
request.send();
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var xmldom = request.responseXML;
            var data = xmldom.getElementsByTagName(‘res‘);
            alert(data[0].childNodes[0].nodeValue);
        }
    }
}

post

test3.js

var request = new XMLHttpRequest();
var url = ‘test3.php‘;
request.open("POST", url, true);
request.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
request.send(‘num=123‘);
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var xmldom = request.responseXML;
            var data = xmldom.getElementsByTagName(‘res‘);
            alert(data[0].childNodes[0].nodeValue);
        }
    }
}

跨域

  1. 代理 (不懂)
  2. jsonp
  3. XHR2
    xhr2 允许跨域
    header("Content-Type: application/json;charset=utf-8");
header(‘Access-Control-Allow-Origin: *‘);              // * 可以用别的替代
header(‘Access-Control-Allow-Methods: POST,GET‘);

jsonp

<?php
echo ‘func({ "url": "www.example1.com" })‘;

function func(data) {
    alert(data.url);
}

var newscript = document.createElement(‘script‘);
newscript.setAttribute(‘src‘, ‘test.php‘);
document.getElementsByTagName(‘head‘)[0].appendChild(newscript);

jsonp 的原理就是利用 script 可以跨域, 然后将请求的内容包进一个函数里面, 比如 func({…}), 参数就是你请求的 data, 这样的话就是 调用 我们本地的一个 func 函数, 然后我们可以定义一个 func 函数 function func(data) { alert(data...); }

注: script 如果放在 head 里面就会自动执行, (对应上面的第二段代码)

jquery jsonp

function func(data) {
    alert(data.url);
}
$(‘input‘).click(function () {
    $.ajax({
        url: ‘http://127.0.0.1/test.php‘,
        dataType: ‘jsonp‘,
        jsonp: ‘func‘
    });
});

xhr2

header("Content-Type: application/json;charset=utf-8");
header(‘Access-Control-Allow-Origin: *‘);              // * 可以用别的替代
header(‘Access-Control-Allow-Methods: POST,GET‘);

JS 操作 AJAX

标签：

原文地址：http://www.cnblogs.com/sunznx/p/4780556.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！