php下的原生ajax请求

浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。

意味着我们的浏览器不提交，通过JS就可以请求服务器。

ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。

1、创建XHR对象

var xhr = new XMLHttpRequest(); //暂不考虑兼容

2、XHR的对象属性和方法

方法：

open("get/post", url, true/false);

//有参数则k=v&k1=v1这种形式

send(null);

属性：

//代表请求状态，不断变化，为4时，请求结束

readyState

//响应的内容

responseText

//响应的状态码200，403，404

status

//状态文字

statusText

事件：

//当readyState变化时会触发此事件

onreadystatechange = function() {};

3、通过XHR对象发送get请求

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <input type="text" name="con" value="" id="con" />

        </div>

    </body>

    <script type="text/javascript">

        var ipt = document.getElementById("con");

        ipt.onblur = function () {

            var con = this.value;

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php?con=" + con;

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    alert("服务器响应数据：" + this.responseText);

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

$con = !empty($_GET['con']) ? trim($_GET['con']) : '没有数据';

echo $con;

填入数据，当鼠标焦点离开input时，触发请求，弹出响应内容。

4、通过XHR对象发送post请求

(1)、open()第1参数为post

(2)、POST的参数以k=v&k1=v1&k2=v2的形式拼接，并用send()发送

(3)、必须要设置Content-Type为application/x-www-form-urlencoded

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <input type="text" name="name" value="" id="name" />

            <input type="password" name="pwd" value="" id="pwd" />

            <input type="submit" name="sub" value="提交" id="sub" />

        </div>

    </body>

    <script type="text/javascript">

        var sub = document.getElementById("sub");

        sub.onclick = function () {

            var name = document.getElementById("name").value;

            var pwd = document.getElementById("pwd").value;

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    alert("服务器响应数据：" + this.responseText);

                }

            };

            //打开链接

            xhr.open("post", url, true);

            //设置请求头部

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //发送请求

            xhr.send("name=" + name + "&pwd=" + pwd);

        }

    </script>

</html>

ajax.php如下：

<?php

$name = !empty($_POST['name']) ? trim($_POST['name']) : '没有数据';

$pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有数据';

echo '用户名：', $name, '密码：', $pwd;

单击submit后发送post请求，弹出响应信息。

5、返回值json，html，text，xml

返回值只有两种text，和xml。不过text内容中可以是一段html或json结构的字符串。

(1)、返回json格式

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <select id="city"></select>

            <input type="button" value="获取" id="get" />

        </div>

    </body>

    <script type="text/javascript">

        var get = document.getElementById("get");

        var city = document.getElementById("city");

        get.onclick = function () {

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    //通过eval把传来的json字符串转成对象

                    var data = eval(this.responseText);

                    var str = "";

                    for(var ix in data) {

                        str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";

                    }

                    city.innerHTML = str;

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

$data = array(

    array('id' => 1, 'name' => '上海'),

    array('id' => 2, 'name' => '北京'),

    array('id' => 3, 'name' => '深圳'),

);

echo json_encode($data);

(2)、返回xml格式

xml通过responseXML来读取，responseXML不是字符串，是DOM对象。

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <div id="news"></div>

            <input type="button" value="获取" id="get" />

        </div>

    </body>

    <script type="text/javascript">

        var get = document.getElementById("get");

        var news = document.getElementById("news");

        get.onclick = function () {

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseXML服务器响应的内容

                    var data = this.responseXML;

                    var str = "";

                    var title = data.getElementsByTagName("title");

                    str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";

                    str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";

                    str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";

                    news.innerHTML = str;

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

header('Content-Type: text/xml;charset=utf-8');

$xml = <<<EOD

<?xml version="1.0" encoding="utf-8"?>

<news>

    <title>111</title>

    <title>222</title>

    <title>333</title>

</news>

EOD;

echo $xml;

6、ajax的同步与异步

通过设置open()的第三个参数true/false，来查看请求的效果。

同步请求：

发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。

异步请求：

发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。

php下的原生ajax请求的更多相关文章

Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
IE9下JQuery发送ajax请求失效
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案: 解决方案一: 设置浏览 ...
前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件其他 j ...
js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
.net MVC下跨域Ajax请求(CORS)
二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...
JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
原生ajax请求的五个步骤
//第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...

随机推荐

第3章文件I/O（2）_文件I/O系统调用及文件描述符
2. 文件I/O系统调用及文件描述符 2.1 文件I/O系统调用 (1)主要函数函数功能函数功能 open() 打开文件 read() 读取文件 creat() 创建文件 write() 写入 ...
unity3d的碰撞检测及trigger
A.基本概念要产生碰撞必须为游戏对象添加刚体(Rigidbody)和碰撞器,刚体可以让物体在物理影响下运动.碰撞体是物理组件的一类,它要与刚体一起添加到游戏对象上才能触发碰撞.如果两个刚体相互撞在一 ...
MONGODB用户、角色和权限管理
最近遇到很多问MONGODB用户认证授权方面的问题,现在特记录下来,与大家共享. 一.概念理解 1.用户概念 Mongodb的用户是由用户名+所属库名组成例如: 登录mongo testdb ...
发送短信验证码及调用短信接口与C# 后台 post 发送
#region 调用短信接口 public ActionResult Mobile(string Tel)//调用接口 { Random rm = new Random(); int i; strin ...
RNN循环神经网络结构
note: RNN处理有序的数据.例如一句话一层双向的循环神经网络示意图(没有 S0' 则为单层循环): 正向循环S0 到 Si:y1的值受X1,A1以及上一层的A0影响反向循环Si 到 S0:y ...
[Delphi] 快速获取文件大小
function GetFileSize(const fName: AnsiString): Int64; var hFile: THandle; begin hFile := _lopen(PAns ...
python urlretrieve 下载图片
python 3中urlretrieve方法直接将远程数据下载到本地.为什么不行? 55 import re import urllib.request def getHtml(url): page ...
MyEclipse: Java代码与UML自动转换
第一步:新建UML2 第二步:拖拽左边的代码向右侧
eclipse 乱码
svn乱码: 教你解决Eclipse中SVN比较乱码问题 workspace->utf-8设置后成功! console乱码: 项目右键 : run as configuration 设置com ...
[转]被玩坏的innerHTML、innerText、textContent和value属性
一.前言由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...

php下的原生ajax请求

php下的原生ajax请求的更多相关文章

随机推荐

热门专题