php下的原生ajax请求

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

意味着我们的浏览器不提交，通过JS就可以请求服务器。
 
ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。
 
1、创建XHR对象
1
var xhr = new XMLHttpRequest(); //暂不考虑兼容
2、XHR的对象属性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方法：
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请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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如下：
1
2
3
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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如下：
1
2
3
4
<?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格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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如下：
1
2
3
4
5
6
7
<?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对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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如下：
1
2
3
4
5
6
7
8
9
10
11
<?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，来查看请求的效果。
 
同步请求：
发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。
 
异步请求：
发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247656.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HBase性能优化总结

HBase性能优化总结

HBase性能优化方法总结&#xff08;一&#xff09;&#xff1a;表的设计 1. 表的设计 1.1 Pre-Creating Regions 默认情况下&#xff0c;在创建HBase表的时候会自动创建一个region分区&#xff0c;当导入数据的时候&#xff0c;所有的HBase客户端都向这一个region写数据&#x…
阅读更多...
.NetCore如何使用ImageSharp进行图片的生成

.NetCore如何使用ImageSharp进行图片的生成

ImageSharp是对NetCore平台扩展的一个图像处理方案&#xff0c;以往网上的案例多以生成文字及画出简单图形、验证码等方式进行探讨和实践。 今天我分享一下所在公司项目的实际应用案例&#xff0c;导出微信二维码图片&#xff0c;圆形头像等等。 一、源码获取 Git项目地址&…
阅读更多...
vue2工程

vue2工程

vue当然可以使用script标签引入&#xff0c;不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中&#xff0c;还是建议使用工程化方式使用vue&#xff0c;vue提供了官方脚手架vue-cli&#xff0c;可以快速构建vue项目&#xff0c;脚手架会帮助开发者创建好建议的工程目…
阅读更多...
flutte的第一个hello world程序

flutte的第一个hello world程序

用命令行创建项目&#xff1a; flutter create flutterdemo VSCode或者AS连接手机后 输入 flutter run 编译后就可以将默认的代码显示在手机上了 开始写hello world 代码&#xff0c;这段代码写在根目录\lib\main.dart文件中&#xff0c;也是Flutter主文件。 整个代码如下 impo…
阅读更多...
Ajax 设置Access-Control-Allow-Origin实现跨域访问

Ajax 设置Access-Control-Allow-Origin实现跨域访问

之前遇到的问题整理 ajax跨域访问是一个老问题了&#xff0c;解决方法很多&#xff0c;比较常用的是JSONP方法&#xff0c;JSONP方法是一种非官方方法&#xff0c;而且这种方法只支持GET方式&#xff0c;不如POST方式安全。 即使使用jquery的jsonp方法&#xff0c;type设为POST…
阅读更多...
vue工程webpack模板配置说明

vue工程webpack模板配置说明

vue工程webpack模板下的配置文件非常多&#xff0c;只能在实际开发过程中反复熟悉&#xff0c;才能渐渐体会官方将配置文件拆分细化的合理性。 主要配置文件中代码的作用从网上摘录了比较全的一份注释&#xff0c;做下记录。 dev-server.js 开发服务端配置 require(./check-v…
阅读更多...
目录的拼接

目录的拼接

找到被拼接文件所在的目录&#xff0c;然后进行拼接 import os 获取当前目录&#xff1a; os.path.dirname(__file__) 如下&#xff0c;被拼接文件所在目录与当前目录的上级目录在同一文件夹下&#xff1a; os.path.join(os.path.dirname(os.path.dirname(__file__)),‘文件夹路…
阅读更多...
vue-resource 拦截器（interceptor）的使用

vue-resource 拦截器（interceptor）的使用

拦截器-interceptor 在现代的一些前端框架上&#xff0c;拦截器基本上是很基础但很重要的一环&#xff0c;比如Angular原生就支持拦截器配置&#xff0c;VUE的Axios模块也给我们提供了拦截器配置&#xff0c;那么拦截器到底是什么&#xff0c;它有什么用&#xff1f;拦截器能帮…
阅读更多...
【GamePlay】入门篇

【GamePlay】入门篇

【GamePlay】入门篇 游戏性编程是指通过一系列游戏系统将游戏想法变成现实的过程。 本次的简例以NPC设计为主。 通常在进行脚本设计前&#xff0c;对NPC的属性进行基本的添加和设定&#xff0c;诸如动画系统、物理系统等等。 1.动画系统 添加Animator组件&#xff0c;绑定骨骼。…
阅读更多...
vue axios POST请求中参数以form data和request payload形式的原因

vue axios POST请求中参数以form data和request payload形式的原因

HTTP请求中&#xff0c;如果是get请求&#xff0c;那么表单参数以namevalue&name1value1的形式附到url的后面&#xff0c;如果是post请求&#xff0c;那么表单参数是在请求体中&#xff0c;也是以namevalue&name1value1的形式在请求体中。通过chrome的开发者工具可以看…
阅读更多...
vue-resource使用

vue-resource使用

vue-resource是一个http请求插件&#xff0c;遵循promise&#xff0c;类似jquery中ajax操作。 vue-resource已不被官方推荐&#xff0c;官方推荐axios插件来操作http协议。 vue-resource中提供的方法 get(url, [options]) head(url, [options]) delete(url, [options]) jso…
阅读更多...
HttpHttps

HttpHttps

http协议与https Http 客户端发送一个HTTP请求到服务器的请求消息包括以下格式&#xff1a; **请求行&#xff08;request line&#xff09;、请求头部&#xff08;header&#xff09;、空行 和请求数据四个部分组成。** Get请求例子&#xff0c;使用Charles抓取的request&…
阅读更多...
vue2使用axios post跳坑，封装成模块

vue2使用axios post跳坑，封装成模块

终于将vue-resource替换成axios了&#xff0c;其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…
阅读更多...
axios使用

axios使用

axios和vue-resource一样&#xff0c;是一个vue中操作http的插件&#xff0c;遵循promise&#xff0c;vue官方也推荐使用axios。 安装axios npm i axios -S axios也是在运行时需要的&#xff0c;所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…
阅读更多...
jQuery length 和 size()区别

jQuery length 和 size()区别

jQuery length和size()区别总结如下&#xff1a; 1.length是属性&#xff0c;size()是方法。 2.如果你只是想获取元素的个数&#xff0c;两者效果一样既 $("img").length 和 $("img").size() 获取的值是一样的&#xff1b;但是如果是获取字符串的长…
阅读更多...
一些关于自己的未来的东西

一些关于自己的未来的东西

2019.7.4 自己大一建立对编程的基础认识&#xff0c;确实培养了一些兴趣&#xff0c;入了个门&#xff0c;不过没有接触到本质。大二加入到了学校的网站开发团队&#xff0c;对网站开发后端进行了学习&#xff0c;对后台开发也有了基础的学习吧&#xff0c;哈哈可能以后就是要走…
阅读更多...
Javascript面向对象编程：构造函数的继承

Javascript面向对象编程：构造函数的继承

今天要介绍的是&#xff0c;对象之间的"继承"的五种方法。 比如&#xff0c;现在有一个"动物"对象的构造函数。 function Animal(){ this.species "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name nam…
阅读更多...
并发与多线程

并发与多线程

并发 并发&#xff08;concurrency&#xff09;是指CPU在某个时间段内交替处理多任务的能力。每个CPU不可能只顾着执行某个进程&#xff0c;而让其他进程一直等待被执行。所以&#xff0c;CPU把可执行时间均分成若干份&#xff0c;每个进程执行一份或多份时间后&#xff0c;记录…
阅读更多...
有没有朋友可以帮我解释一下贴水是什么意思？

有没有朋友可以帮我解释一下贴水是什么意思？

通俗易懂的讲&#xff1a;贴水便宜&#xff0c;升水贵 当前&#xff0c;螺纹钢05合约就是贴水01合约 翻译&#xff0c;螺纹钢05合约就是比01合约便宜 升水同理 转载于:https://www.cnblogs.com/luoluo-123/p/11142229.html
阅读更多...
es6常用点记录

es6常用点记录

letconst解构赋值字符串数组函数对象SymbolSetWeakSetMapWeakMapProxyreflectProxy与Reflex结合实例classpromiseiteratorGerneratorDecorators模块学习资料 let /* let 声明变量 *//* es6相对于es5的全局和局部作用域&#xff0c;多了一个块作用域&#xff0c;块作用域里声明的…
阅读更多...
最新文章

Copyright @ 2022~2023