Ajax

最新推荐文章于 2022-06-19 13:50:53 发布
最新推荐文章于 2022-06-19 13:50:53 发布
阅读量151 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41927206/article/details/89598560
版权

PHP基础语法

Hello World

​ echo作用就是向页面当中输入字符串

<? php
    echo '<div>hello world!';
?>

变量声明与字符

php的变量声明 以$开头

$num = 123;

  • 字符串拼接为英文状态的 ‘ . ’

  • 单引号对于其中的变量当做普通的字符串处理

  • 双引号对于其中的变量会吧变量解析成变量值

内容输出

  • echo：输出简单数据类型，如字符串、数值
  • print_r() ：输出复杂数据类型，如数组
  • var_dump()：输出详细信息，如对象、数组

数据类型

一维数组

声明

 <?php 
     	// 声明方式1
        $arr = array(1,2,3,4,5);
		// 声明方式2
		$arr1 = array("name" =>"haha","age"=>"18");
        print_r($arr); 
	//Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 ) 
  ?>

print_r输出

$arr1 = array("name" =>"haha","age"=>"18");
 print_r($arr1); //Array ( [name] => haha [age] => 18 )

var_dump()输出

$arr1 = array("name" =>"haha","age"=>"18");
// 输出内容
//  array (size=2)
 // 'name' => string 'haha' (length=4)
 // 'age' => string '18' (length=2)

二维数组

声明

var_dump($arr1);
    echo '<br>';
    $arr2 = array();
    $arr2[0] = array(1,2,3,4,5);
    $arr2[1] = array(1,2,3,4,5);
    $arr2[2] = array(1,2,3,4,5);

    var_dump($arr2);


// 输出内容
// array (size=3)
// 0 => 
// array (size=5)
//     0 => int 1
//     1 => int 2
//     2 => int 3
//     3 => int 4
//     4 => int 5
// 1 => 
// array (size=5)
//     0 => int 1
//     1 => int 2
//     2 => int 3
//     3 => int 4
//     4 => int 5
// 2 => 
// array (size=5)
//     0 => int 1
//     1 => int 2
//     2 => int 3
//     3 => int 4
//     4 => int 5

PHP请求

http协议请求方式

http协议的常用的请求方式：

  • get 用来从服务器获取数据（参数一般作为查询条件）
  • post 用来添加数据
  • put 用来修改数据
  • delete 用来删除数据

get请求

$f = $_GET['flag']; // 获取url地址中传递的参数
echo $f;

post请求

$name = $_POST['name'];
$age = $_POST['age'];

解决乱码

header("Content-type:text/html;charset=utf-8");

json_encode() 把数组或者对象转换成字符串

Ajax

Ajax发送请求的步骤

  1. 创建XMLHttpRequest对象

    var xhr = new XMLHttpRequest();

    标准做法

    var xhr = new XMLHttpRequest();

    早期IE(IE6)

    var xhr = new ActiveXObject('Microsoft.XMLHTTP')

    处理兼容

    var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); //标准
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

  2. 准备发送

    xhr.open(请求方式, 请求地址, 同步/异步);
// 默认异步（true）、同步（false）

    格式

    • 参数1：请求方式（get获取数据，post提交数据）

      1.get请求

      ​ encodeURI（） 用来处理get请求对中文参数进行编码，防止IE浏览器的中文乱码

      2.post请求

      ​ 参数通过send传递，不需要通过encodeURI（）转码，必须要设置请求头信息

      // 设置请求头信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    • 参数2：请求地址

    • 同步或者异步标志位，默认是true表示异步，false表示同步

      如果是get请求那么请求参数必须在url中传递

    xhr.open('get', '02get.php', true);

  3. 执行发送

    xhr.send(null);
// get请求传null,post传相应的数据

  4. 指定回调函数

    onreadystatechange函数由浏览器来调用，调用的条件就是readyState状态发生变化（不包括从0变为1）

    readyState的取值

    • 等于0的时候，xhr对象初始化（已经创建完成）
    • 等于1的时候，执行发送的动作（说明已经发送了请求）
    • 等于2的时候，说明浏览器已经收到了服务器响应的全部数据
    • 等于3的时候，正在解析数据
    • 等于4的时候，数据已经解析完成，可以使用了

    4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的

    xhr.status

    用于判断数据是否正确

    ​ http的常见状态码

    • 200表示数据响应正常
    • 404没有找到请求的资源
    • 500服务器端错误

    这里的200表示数据是正常的

    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
     	if (xhr.status == 200) {
            var data = xhr.responseText;
            if (data == '1') {
                // 成功的操作
            } else {
                // 失败的操作
            }
     	}   
    }
}

案例：模拟登陆（异步刷新）

界面

。。。。

Ajax

 window.onload = function () {
            var btn = document.getElementById('btn');
            
            console.log(user);
            console.log(pas);
            
            btn.onclick = function () {
                var user = document.getElementById('user').value;
                var pas = document.getElementById('pas').value;
                // 1. 创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                // 2.准备发送 xhr.open(请求方式, 请求地址, ...)
                xhr.open('get', 'demo1.php?user=' + user + '&pas=' + pas, true);
                // 3.发送请求
                xhr.send(null);
                // 指定回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4){
                        if (xhr.status == 200) {
                            var data = xhr.responseText;
                            var hint = document.getElementById('hint');

                            if (data === '1') {
                                hint.innerText = '登录成功';
                            } else if (data === '2') {
                                hint.innerText = '登录失败';
                            }
                        }
                    }
                }
            }
        }

html

<form>
        账号：<input type="text" name="user" id="user"><span id="hint"></span>
        <br>
        密码：<input type="text" name="pas" id="pas">
        <br>
        <input type="button" value="登录" id="btn">
    </form>

php

<?php 
    $user = $_GET['user'];
    $pas = $_GET['pas'];

    if ($user == "admin" && $pas == "123") {
        echo '1';
    } else {
        echo '2';
    }
?>

AJAX数据格式

XML 数据格式

响应数据用responseXML

这种数据格式的弊端：

  1. 元数据占用的数据量比较大，不利于大量数据的网络传输
  2. 解析不太方便
<?xml version="1.0" encoding="utf-8" ?>
<booklist>
    <book>
        <name>数据结构</name>
        <athour>哈哈</athour>
        <desc>这很重要</desc>
    </book>
    <book>
        <name>算法导论</name>
        <athour>小白</athour>
        <desc>这很very重要</desc>
    </book>
    <book>
        <name>操作系统原理</name>
        <athour>小红</athour>
        <desc>我就不多说！</desc>
    </book>
</booklist>

DOM树遍历

// DOM树遍历
function fn (obj) {
for (var i = 0, len = obj.children.length; i < len; i++) {
        var ele = obj.children[i];
        if (ele.children.length > 0) {
            fn(ele);
        } else {
            console.log(ele.nodeName+'//'+ele.innerHTML);
        }
    }
}

JSON 数据格式

响应数据用responseText

json数据和普通的js对象的区别：

  1. json数据没有变量
  2. json形式的数据结尾没有分号
  3. json数据中的键必须用双引号包住
{
    "name":"张三",
    "age":12,
    "lover":["唱歌", "跳舞"],
    "friend":{
        "high":"180",
        "weight":"80kg"
    }
}

json数据解析

  1. JSON.parse(字符串)

    解析为对象

  2. JSON.stringify(对象)

    解析为字符串

  3. eval（"("+字符串")"）

    解析为对象，但是不安全，不推荐使用

//1. 字符串解析为对象
JSON.parse(str);
//2. 对象转为字符串
JSON.stringify(obj);

json数据接口

​ 数组可以理解为一种json格式

<?php 
	// 模拟数据
    $uname = '张三';
	$age = 12;
	// 发送字符串
	ecno '{"uname":"'.$uname.'","age":"'.$age.'"}';
	
	// 利用PHP api转为json格式
	$arr = array("tom", "jerry", "spike");
	$str = json_encode($arr);
	echo $str
?>

初步理解异步效果

  • 页面加载的同步与异步（白屏与不刷新）
    1. 普通的页面效果：w3scholl.org
    2. 页面刷新的效果：例如评论加载
  • 描述两者之间的行为方式
    1. 同步 彼此等待（浏览器与用户） — 阻塞
    2. 异步 各做各的（浏览器与用户） — 非阻塞

js的处理机制

js底层 单线程+事件队列

事件队列中的任务执行的条件：

  1. 主线程已经空闲
  2. 任务满足触发条件
    1. 定时函数（延迟事件已经达到）
    2. 事件函数（特定事件被触发）
    3. ajax的回调函数（服务器端有数据响应）

Ajax初步封装

Ajax封装代码

/**
 * 
 * @param {*} type 请求方式
 * @param {*} url 请求地址
 * @param {*} para 参数
 * @param {*} dataType 返回的数据类型
 * @param {*} fn 回调函数
 */
function ajax(type, url, para, dataType, fn) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (type === 'get') {
        xhr.open(type, url+'?'+para);
    } else {
        xhr.open(type, url);
    }
    var data = null;
    if (type === 'post') {
        data = para;
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

    xhr.send(data);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = xhr.responseText;
                console.log(data);
                
                if (dataType === 'json') {
                    data = JSON.parse(data);
                }
                
                fn(data);
            }
        }
    }
}

案例(输入图片编号，查询图书)


   	<title>查询图书</title>
    <script src="demp2.js"></script>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function () {
                var ipt = document.getElementById('ipt').value;

                ajax('post', 'book.php', 'sno=' + ipt, 'json', function (data) {
                    var res = document.getElementsByClassName('res')[0];
                    if (data.flag === '1') {
                        res.innerText = "查无此书！！";
                    } else {

                        var str = '<ul><li>' + data.bookname + '</li><li>' + data.author +
                            '</li><li>' + data.desc + '</li></ul>';
                        res.innerHTML = str;
                    }
                    console.log(data);

                });

            }, false);
        }
    </script>

<body>
    <div class="box">
        <div class="ipt">
            图书编号：<input type="text" name="sno" id="ipt">
            <input type="button" value="查询" id="btn">
        </div>

        <div class="res">

        </div>
    </div>
</body>


<?php 
    $sno = $_POST['sno'];    
    $books = array();
    $books['sgyy'] = array('bookname'=>'三国演义','author'=>'罗贯中','desc'=>'一个杀伐纷争的年代'); 
    $books['shz'] = array('bookname'=>'水浒传','author'=>'施耐庵','desc'=>'108条好汉的故事'); 
    $books['xyj'] = array('bookname'=>'西游记','author'=>'吴承恩','desc'=>'佛教与道教的斗争'); 
    $books['hlm'] = array('bookname'=>'红楼梦','author'=>'曹雪芹','desc'=>'一个封建王朝的缩影');
    
    if (array_key_exists($sno, $books)) {
        echo json_encode($books[$sno]);
    } else {
        echo '{"flag":"1"}'; 
    }
?>

jQuery 库中的Ajax

$.ajax()/$.post()/$.get()

$.post('请求地址','json',function(){});

$.ajax({
    type:get/post,
	
	url:请求的地址,

	data:发送到后台的数据,"name=John&location=Boston"/{name:'John'},

	dataType:'xml/text/json/jsonp/script/html',

	success:function(msg){msg就是后台返回的数据},

    error:function(){
        // 服务器端错误执行的
    }

})

Ajax跨域

同源策略

  1. 同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域

  2. 同源策略主要为了保证浏览器的安全性

  3. 在同源策略下，浏览器不允许Ajax跨域获取服务器数据

当前的页面地址：http://www.example.com/detail.html

URl不同的地方
http://api.example.com/detail.html域名不同
https//www.example.com/detail.html协议不同
http://www.example.com:8080/detail.html端口不同
http://api.example.com:8080/detail.html域名、端口不同
https://api.example.com/detail.html协议、域名不同
https://www.example.com:8080/detail.html端口、协议不同

解决跨域

  1. JSONP原理

    JSONP的本质：动态创建script标签，然后通过他的src属性发送跨域请求，然后服务器端响应的数据格式为【函数调用(foo(实参))】，所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段js代码）来调用

    • 静态script标签的src属性进行跨域请求

      // 在script标签内容利用src进行跨域
<script src="http://ajax.com/ky.php"></script>

      // 服务器端返回一条js语句
<?php 
    echo 'var data = 456';
?>

      缺点：

      1. 要想使用数据必须要注意script标签的顺序问题
      2. 如果通过get请求传参，只能写死
      3. 如果对script标签加入async属性，可能会失败

      async属性：表示异步加载资源，默认情况下是同步加载

    • 动态创建script标签，通过标签的src属性发送请求

      动态创建script标签发出去的请求是异步请求，所以无法直接访问

      var script= document.createElement('script');
 // 生成src链接，并且告诉后端的函数名
script.src = 'http://ajax.com/ky.php?callback=foo';
// 获取到head标签
var head = document.getElementsByTagName('head')[0];
// 把script标签添加到head里面
head.appendChild(script);
// 服务器端返回的函数调用
function foo(data) {
    console.log(data);
}

      <?php 
    $cb = $_GET['callback'];
    echo ''.$cb.'(456)';
?>

      利用上面的方式必须和服务器端的函数名保持一致

JQuery中JSONP的使用

$(function () {
$('button').click(function () {
    $.ajax({
        type: 'get',
        url: 'http://ajax.com/ky.php',
        // 指定数据类型
        dataType: 'jsonp',
        // 指定后端接受返回的函数名
        jsonp: 'cb',
        // 返回的函数名
        jsonpCallback: 'abc',
        success: function (data) {
            console.log(data);
        },
        error:function () {
            console.log('error');

        }
    });
});
        });

  • jsonp属性的作用

    自定义参数名字（callback=abc，这里的名字指的是等号前面的键，后端根据这个键获取方法名，jQuery的默认参数名称是callback）

  • jsonpCallback属性的作用

    就是自定义回调函数的名字（callback=abc，这里的名字指的是等号后面的值）

模拟jQuery封装

function ajax(obj) {
    // 定义默认属性
    var defa = {
        type: 'get',
        url: '#',
        data: {},
        jsonp: 'callback',
        jsonpCallback: '',
        success: function (data) {
            console.log(data);
        }
    }

    // 拷贝传来的obj
    for (var key in obj) {
        defa[key] = obj[key];
    }

    // 指定回调函数接收的名字
    var name = 'jQuery' + ('1.1.1.2' + Math.random()).replace(/\D/g, '') + '_' + new Date().getTime();
    if (defa.jsonpCallback) {
        name = defa.jsonpCallback;
    }

    // 生成参数
    var str = '';
    for (var key in defa['data']) {
        str += key + '=' + defa['data'][key] + '&';
    }
    if (str) {
        str = '&' + str;
        str = str.substring(0, str.length - 1);
    }

    console.log(str);

    // 动态创建script
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = defa.url + '?' + defa.jsonp + '=' + name + str;
    head.appendChild(script);

    // 接收后端返回的数据
    window[name] = function (data) {
        defa.success(data);
    }

}

百度智能提示

页面布局

1556283053679

ajax代码

$(function () {
    $('.search input').keyup(function () {
        var text = $(this).val();
        $.ajax({
            url: 'https://www.baidu.com/sugrec',
            data: {
                wd: text,
                prod: 'pc'
            },
            dataType: 'jsonp',
            jsonp: 'cb',
            success: function (data) {
                console.log(data);

                var tag = '';
                $.each(data.g, function (i, e) {
                    tag += '<li class="li">' + e.q + '</li>';
                });
                $('ul').html(tag);
                // 鼠标移入的效果
                $('li').hover(function () {
                    $(this).css({backgroundColor:'deepskyblue','color':'#fff'});
                }, function () {
                    $(this).css({'backgroundColor':'','color':'#000'});
                });
            }
        });
        if(text <0){
            $('ul').hide();
        } else {
            $('ul').show();
        }
    });
});
初心不变0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
AJAXCALL
10-31
AJAXCALL
Android中的后台邮件发送
03-04 449
一、调用邮件发送工具类进行邮件发送 new Thread(){           public void run() {               try {               GMailSender sender = new GMailSender(                       "lixeeq19910119@gmail.com",  
Ajax发送request：GET or POST
Capfish的专栏
10-22 253
用Ajax发送请求到服务器端有Get跟Post两种方式：GET: xmlhttp.open("GET","demo_get.asp?fname=Henry&amp;lname=Ford",true); xmlhttp.send();   用Get的方式发送，要把参数编辑到URL中。用“？”隔离文件地址，用“&amp;”分隔各个参数。POST: xmlhttp.open("POST","...
Promise和ajax同源策略
qq_38256266的博客
07-09 180
Promise和ajax同源策略一、Promise对象1.1、Promise概念1.2、Promise特点1.3、原理1.4、Promise方法1.5、Promise封装ajax二、ajax的同源策略2.1、什么叫做同源2.2、什么叫同源策略三、jsonp跨域3.1、jsonp的原理3.2、组成3.3、如何利用jsonp进行跨域请求3.4、简单封装jsonp3.5、服务器端跨域 一、Promise对象 1.1、Promise概念 Promise 是es6新增的异步编程的一种解决方案，如解决回调地狱。比传统
Ajax基础+模拟百度搜索
m0_51371862的博客
09-11 505
一、原生ajax 最近在学习ajax，就弄了一个好玩的东西模拟导读搜索。虽说也不难，就是用来消化一下学到的知识。 先简单地介绍一下ajax中的get和post方法吧 get方法 1.创建一个XMLHttpRequest类型对象 var xhr = new XMLHttpRequest(); 兼容写法：（虽然现在通常不会用到） if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = n
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX简介
xpmhhh的博客
03-20 6829
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
飞机大战系列 Space War1.0（免费，开源）
07-14
飞机大战系列 Space War1.0（免费，开源）
基于Hadoop的文件词频统计的实现（大数据技术课程设计）
07-14
使用Hadoop大数据架构体系中的HDFS、HBase以及Spark软件，完成大数据处理的典型案例：文件词频统计的实现。
湖科大计算机网络视频笔记，跟着视频系统学了一遍的记录
最新发布
07-14
视频链接：https://www.bilibili.com/video/BV1c4411d7jb/，适用于考研后期查缺补漏和前期确定复习方向、期末考和课前预习。做成PDF形式便于查阅和在iPad上查看。
matlab下载，表面张力，main.m
07-14
matlab下载，表面张力，main.m
ajax笔记ajax笔记ajax笔记
04-03
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值