今天试着默写ajax时出现了神秘的问题，出现如图所示的错误：

百度了一下，说是跨源问题，我以为放在同一个文件夹不也是同源嘛！结果打扰了，属实是弟弟，协议，域名，端口相同的算同源，其他的不是！！！

最后找到了解决的方法，用Appserv在本地搭建一个web服务器，（Appserv的教程很多，大概都能解决问题）

（假装自己开始接触服务器了哈）

好不容易多点空（我应该被抓去戒网瘾的），再深入点学学ajax吧~

一个很简单但是该有的有了八成的例子：

<body>

    <button id="contain">点击修改</button>

</body>

<script async>

    function ajax(){

        var request = new XMLHttpRequest();

        request.open("POST","data.html",true);

        console.log(request.status,request.readyState);

        request.onreadystatechange = function(){

            console.log(request.status,request.readyState);

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

                contain.innerHTML = request.responseText;

            }

            // Response.setHeader("Access-Control-Allow-Origin","*");

        };

        request.send();

    }

    window.onload = function(){

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

        contain.onclick = ajax;

    }

</script>

status：响应的http状态，statusText：http状态的说明

readystate：请求/响应的活动阶段，

0~4，表示未初始化且未调用open()方法、启动。已调用open()但尚未调用send()方法、发送，已调用send()方法但尚未收到响应、接收，已经接收到部分数据、完成，接收到全部数据，上面的例子在控制台打印的结果：

请求头与响应头：

每个http请求与响应都会带有相应的头部信息，使用setRequestHeader()方法（在open()与send()之间调用）可以自定义请求的头部信息，使用getResponseHeader()并传入头部字段名称可以取得相应的响应头部信息，实例：

GET请求与POST请求：

暂时先这么理解：前者一般用于获取/查询数据，因为受数据量小的限制，而POST一般用于发送数据，其数据量不受限制

GET请求：将查询字符串参数追加到url末尾，以便将信息发送到服务器，举例：

<body>

    <form method="GET" action="submit.html">

        <fieldset>

            <div>

                <label for="name">用户名：</label>

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

            </div>

            <div>

                <label for="password">密码:&nbsp;&nbsp;&nbsp;</label>

                <input type="password" id="password" name="password">

            </div>

            <button type="submit" id="send">提交</button>

            <button type="reset">重置</button>

        </fieldset>

    </form>

    <p id="holder"></p>

    <script async>

        function submitWithAjax(){

        var form1 = document.getElementsByTagName("form")[0];

        var request = new XMLHttpRequest();

        var dataParts = [];

        var element;

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

        // console.log(form1.elements.length);fieldset也算一个

        for(var i = 0;i<form1.elements.length;i++){

            element = form1.elements[i];

            dataParts[i] = element.name + '=' + encodeURIComponent(element.value);

        }

        var data = dataParts.join("&");

        request.open("GET","submit.html",true);

        //request.setRequestHeader('Content-type',"application/x-www-form-urlencoded");

        request.onreadystatechanged = function(){

            if(request.readyState == 4){

                if(request.status == 200 || request.status == 0){

                    var matches = request.responseText.match(/<p>([\s\S]+)<\/p>/);

                    if(matches.length > 0){

                        holder.innerHTML = matches[1];

                    }else{

                        holder.innerHTML = "<p>出错了!</p>";

                    }

                }else{

                    holder.innerHTML = "<p>"+request.responseText+"</p>";

                }

            }

        };

        request.send(data);

    };

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

     window.onload= submitWithAjax;

    </script>

</body>

注意这里，GET请求传入url末尾的查询字符串需要经过正确的编码

POST请求，将数据作为请求的主体进行发送，

默认情况下服务器对提交web表单的请求和post请求是不同的处理方式，但可以使用XHR来模仿表单提交：

首先设置请求头信息

然后以适当格式创建一个字符串，

高程三介绍了自定义一个serealize()函数来进行序列化表单数据。

快乐！ajax入门（1）的更多相关文章

  1. 掌握 Ajax，第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  2. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  3. ajax入门之建立XHR对象 (1)

    ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...

  4. ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  5. ASP.NET AJAX入门系列（1）：概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  6. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  7. 系列文章--ASP.NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  8. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  9. AJAX入门---点滴的积累

    AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...

  10. JavaEE的ajax入门

    JavaEE的ajax入门 代码下载 链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg 提取码:fgx6 复制这段内容后打开百度网盘手机App,操作 ...

随机推荐

  1. 巡风配置安装 –centOS6.5

    巡风是一款适用于企业内网的漏洞快速应急.巡航扫描系统,通过搜索功能可清晰的了解内部网络资产分布情况,并且可指定漏洞插件对搜索结果进行快速漏洞检测并输出结果报表. 其主体分为两部分:网络资产识别引擎,漏 ...

  2. git忽视上传规则文件 .gitignore

    语法 语法 作用 例子 "/" 忽略根目录下的文件 /data "*" 忽略所有文件 *.txt => 1.txt,2.txt... "?&qu ...

  3. 基于tomcat获取在线用户数

    https://blog.csdn.net/smallnetvisitor/article/details/84697505 需求: 统计某应用的在线用户数 实现方案: 1.基于session监听(复 ...

  4. Python 限制线程的最大数量(Semaphore)

    import threadingimport time sem = threading.Semaphore(4) # 限制线程的最大数量为4个 def gothread(): with sem: # ...

  5. Android Studio学习之 日志工具

    Log.v()   低级日志 Log.d(' ',' ')  debug调试信息 第一个参数tag,当前类名 第二个参数msg,打印具体内容 Log.i()  info数据 Log.w() warn警 ...

  6. 在<canvas>上绘制img（drawImage()）时需要注意的事

    <canvas>标签相当于是一个画布,css决定画布的样式(这块画布的背景颜色.大小等),脚本(一般使用JavaScript)就是画笔,我们可以在这个画布上绘制线条.形状.文字.图片等. ...

  7. python中使用redis实战

    from redis import StrictRedis rds = StrictRedis(host='127.0.0.1', port=6379, db=0, decode_responses= ...

  8. docker-compose up使用自定义的网段的两种方式（从其根源指定）

    问题描述         还是那个研究安全大业的同事,在部署他的秘密武器,是用docker-compose部署的,有差不多20多个docker-compose.yml文件,然后由于docker-com ...

  9. 压力测试：系统吞吐量、TPS（QPS）、用户并发量、性能测试概念和公式

    PS:下面是性能测试的主要概念和计算公式,记录下: 一．系统吞度量要素: 一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高, ...

  10. 基于 debian 操作系统的 docker 镜像，安装 vim

    基于 debian 操作系统的 docker 镜像,安装 vim,步骤: apt-get update apt-get install vim 注意: 直接运行步骤2,可能会报错: Reading p ...