侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 129777 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

ajax(二)

2024-04-28 星期日 / 0 评论 / 0 点赞 / 5 阅读 / 20651 字

1. PHP中的header 设置文本编码 设置编码格式为utf-8 header("Content-Type:text/html;charset=utf-8"); 设置页面跳转设置跳转到百度首页 h

1. PHP中的header

      设置文本编码

       设置编码格式为utf-8

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

    设置页面跳转设置跳转到百度首页

      header("location:http://www.baidu.com");

    设置页面间隔刷新

      header("refresh:3;url=http://www.xiaomi.com");

 

2.    http协议  超文本传输协议

     基于请求--响应的协议

     协议是w3c去指定,它是用来定义客户端浏览器与服务器进行通讯的一个标准。

     http协议  请求--响应  的协议   request-response

     客户端浏览器发送到服务器的数据,我们称为请求的数据格式。

      发送请求又有两种方式     get  post  

 

      发送到服务器的数据格式分为四部分

          请求首行   请求头     请求空行      请求体

 

请求行: 由请求方式、请求URL和协议版本构成

 

请求头:

      Host:localhost请求的主机

Cache-Control:max-age=0控制缓存

Accept:*/* 接受的文档MIME类型

User-Agent:很重要

Referer:从哪个URL跳转过来的

Accept-Encoding:可接受的压缩格式

 

    get和post的区别

      get:

           1.get请求的参数在地址栏,不安全。

           2.get请求参数的数据大小有限制。

         3.没有请求体。

         4.请求头比post要少一些,性能要高一些。

    post:

          1请求参数都在请求体当中,安全;

         2请求的数据大小没有限制;

         3有请求体;

         4有一个特殊的请求头。

              Content-Type:

 Content-Type: application/x-www-form-urlencoded

 

    服务器响应给客户端浏览器的数据,我们称为响应的数据格式。

             响应首行   响应头  响应空行 响应体refresh:5;url=http://www.itheima.com

 

    同步交互与异步交互:

            同步交互:浏览器发送一个请求给服务器,服务器返回数据给客户端浏览器

          客户端之前的界面会被覆盖掉,在响应的过程当中,客户端浏览器不能做其他事情.

            异步交互:浏览器发送一个请求给服务器,服务器返回数据给客户端浏览器。优势在于不阻塞程序的执行,从而提升整体执行效率。

         客户端之前的界面不会被覆盖掉,在响应的过程当中,客户端浏览器能做其他事情.

         XMLHttpRequest可以以异步方式的处理程序。

 

3.   send要写在open的下面,不然会出BUG。写在最下面。

          js 提供了一个XMLHttpRequest 对象来帮助我们完成异步交互.

 XMLHttpRequest  浏览器内建对象,用于在后台与服务器通信(交换数据),由此我们便可实现对网页的部分更新,而不是刷新整个页面。

            通过这个对象发送http 请求,接收数据.

            1:创建对象

            2:打开连接

            3:发送数据

            4:接收数据.

 

<?php

 

   $username=$_POST['username'];

   echo $username;

 ?>

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

    <!-- 点击按钮,发送一个请求 -->

<input type="button" value="ajax post交互">

<script>

document.querySelector("input[type=button]").onclick=function(){

var xhr=new XMLHttpRequest();

xhr.open("post","03ajax.php");

//post 提交必须有一个请求头  Content-Type:

//写在open和send之间,get请求可以不设置。

                   //这个请求头需要我们自己设置上去.

                   //我们setRequestHeader("","");

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

xhr.send("username=hahaha");

xhr.onreadystatechange=function(){

//判断服务器是否响应完成且响应是否成功

if(xhr.readyState==4 && xhr.status==200){

var data=xhr.responseText;

alert(data);

}

}

};

</script>

</body>

</html>

 

4.   点击a标签后4秒后打印

<?php

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

    sleep(4);

    echo "这个是服务器返回的数据";

 ?>

4. xmlHttp.open(method,url,async) 第三个参数:指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。

 

 

4.  响应报文   

    1、状态行

    由协议版本号、状态码和状态信息构成

   2、响应头

Date:响应时间

Server:服务器信息

Content-Length:响应主体长度

    Content-Type:响应资源的MIME类型

 

 

5.   检测用户名是否已经存在的案例

 

注意这里的第17行的send()里因为username是获取的变量,所以那样写

 

 

6.  聊天框框案例  appendChild 这个C记得大写

    PHP  array_rand()函数

   array_rand(array,number) 函数从数组中随机选出一个或多个元素,并返回。

       number默认值为1,不写的话是默认返回一个,写了的话是返回键值对的键。这里返回的是索引

 

03chat.html

 

 

7.   iframe标签   12306案例

 

 

8.  

 

javascript:;

1:<a href="####"></a>

2:<a href="javascript:void(0)"></a>

3:<a href="javascript:void(null)"></a>

4:<a href="#" onclick="return false"></a>

点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP(实际测试发现 滚动条会滚到顶端)而以上四种方法仅仅表示一个死链接都表示是一个死链接不会跳转也不会返回到顶部.

 

9  API详解

 

 

10.  XML    

      一种标记语言,类似HTML,用来传输数据,具有自我描述性。

   语法规则:

     1、必须有一个根元素

2、不可有空格、不可以数字或.开头、大小写敏感

3、不可交叉嵌套

4、属性双引号(浏览器自动修正成双引号了)

5、特殊符号要使用实体

6、注释和HTML一样

 

 

11.  get方式的请求格式   请求空行我们看不到

get  方式提交 (客户端浏览器发送给服务器的数据)

        //请求首行

        //告诉服务器一些东西

        GET /day07/code/form/01demo.php?username=zhangsan&age=11 HTTP/1.1

 

        //请求头:是有请求头的名称,请求头的值来组成.

        Host: www.taobao.com

        Upgrade-Insecure-Requests: 1

        //User-Agent:告诉服务器客户端浏览器的版本,操作系统的版本

        User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

        //我使用google 浏览器发送一个请求给hao123  的服务器,这个时候我会给服务器一个

        User-Agent 告诉服务器我客户端浏览器 的版本,

        服务器 接收到请求,肯定能够获取到我客户端浏览器的版本。

        你客户端浏览器的版本进行判断,如果你用的不是百度浏览器的

        echo "<a href="http://www.baidu.com/baidu.exe">您的浏览器的存在安全风险,请跟新</a>";

 

        //接收:告诉服务器,我客户端接收的数据类型.

        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

 

        //Referer:告诉服务器,我的当前的请求来自于那个页面.

        //我的请求来自与那个页面

        做什么:

             1:广告流量统计

             Referer:http://www.sohu.com

             2:防盗链

             比如我的网站上面有一个资源,dfafdsa.avi

             通过一个超链接可以访问到。

             假设是letv 乐视网站上面的 一个资源   dfafdsa.avi

 

             http://www.letv.com/dasfasdf.avi

 

             如果说从我本站上面的页面有可能点击一个超链接指向到

             http://www.letv.com/dasfasdf.avi

             http://www.letv.com

             但是也有可能从别的站点,www.aiqiyi.com

             超链接点击这个超链接指向到http://www.letv.com/dasfasdf.avi

             这个时候肯定会给letv 带过去一个

             Referer 请求头,这个头的值:www.aiqiyi.com

 

        Referer: http://www.taobao.com/day07/code/form/01demo.html

        网站:导流量.

 

 

        //接收的压缩格式.服务端返回的数据的压缩格式.

        Accept-Encoding: gzip, deflate, sdch

        //接收的语言

        Accept-Language: ,zh;q=0.8

        请求空行(一般我们看不到)

        请求体 (get 方式是没有请求体)

12.  post方式的请求格式

 

        POST /day07/code/form/02demo.php HTTP/1.1

        Host: www.taobao.com

        Content-Length: 9

        Cache-Control: max-age=0

        Origin: http://www.taobao.com

       Upgrade-Insecure-Requests: 1

        User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

        //内容类型:客户端发送给服务器的,post 提交才有的独有的一个请求头

        Content-Type: application/x-www-form-urlencoded

        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

        Referer: http://www.taobao.com/day07/code/form/02demo.html

        Accept-Encoding: gzip, deflate

        Accept-Language: zh-CN,zh;q=0.8

 

       zym=ahaha(请求体发送到服务器端的数据,post 方式才有的)

 

13. 响应

响应的数据格式四部分

        1:响应首行

        2:响应头

        3:响应空行

        4:响应体.

                //响应首行

                协议版本,200 状态吗 200 代表ok 成功

                HTTP/1.1 200

                //日期,服务器时间.

                Date: Tue, 18 Oct 2016 01:29:26 GMT

                //告诉客户端服务器的版本

                Server: Apache/2.2.21 (Win32) PHP/5.3.10

                X-Powered-By: PHP/5.3.10

                //响应到客户端的内容

                Content-Length: 14

                //内容类型,告诉客户端浏览器,我这是一个文本,html 文本.

                Content-Type: text/html

 

                //响应体,浏览器会解析zhangsan<br>11 渲染页面

                zhangsan<br>11

 

14.  header("Content-Type:text/html";charset=utf-8);

 

14.  HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

onreadystatechange是Javascript的事件的一种,其意义在于监听XMLHttpRequest的状态

 

15. 现在跟服务器的交互通过XMLHttpRequest 来完成,调用这个对象的api 发送请求,接收数据.

1、获取状态行(包括状态码&状态信息)

    xhr.status//状态码

    xhr.statusText//状态信息

2、获取响应头

xhr.getResponseHeader('Content-Type');//获取指定头信息

xhr.getAllResponseHeaders();//获取所有响应头信息

3、响应主体

   xhr.responseText;

   xhr.responseXML;

    我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

 

 16.    //这个交互应该怎么去做

     1:我要获取到XMLHttpRequest 这个对象

     2:根服务器建立连接 (地址,提交方式)

     3: 发送数据给服务器

     4:接收服务器返回的数据

 

17. xhr.readyState==4 && xhr.status==200

    这里记得readyState里的S大写

 

18. responseText以字符串形式返回,responseXML是以XML形式返回。

广告 广告

评论区