xmlhttp

Ajax学习笔记(二)

我们两清 提交于 2019-11-28 01:43:20
一、Ajax请求——GET <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Ajax 发送get 请求</h1> <input type="button" value="发送get_ajax请求" id='btnAjax'> <script type="text/javascript"> // 绑定点击事件 document.querySelector('#btnAjax').onclick = function () { // 发送ajax 请求 需要 五步 // (1)创建异步对象 var xmlhttp = new XMLHttpRequest(); // (2)设置请求的参数。包括:请求的方法、请求的url。 xmlhttp.open('GET', '001.php'); // (3)发送请求 xmlhttp.send(); //(4)注册事件。 onreadystatechange事件,状态改变时就会调用。 //如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。 xmlhttp.onreadystatechange = function () { // 为了保证 数据 完整返回,我们一般会判断

Ajax学习笔记(一)

流过昼夜 提交于 2019-11-27 22:47:57
看那些前端招聘简章中我们多多少少能看到一个身影——ajax,他成为了前端工作者必备的一项技能要求。那什么是Ajax呢? Ajax 全称是 asynchronous javascript and xml(asynchronous=异步),并不是新的编程语言,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,在不需要重新加载整个网页的情况下,实现页面的 局部刷新 ,从而创建快速动态网页的技术。 Ajax创建过程 1.创建XMLHttpRequest对象,即创建一个异步调用对象; var xmlhttp=new XMLHttpRequest();//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。 var xmlhttp=new ActiveXObject("Microsoft.XMLHttp");//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象://兼容性写法var xmlhttp;if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5

jq调用ajax的总结

强颜欢笑 提交于 2019-11-27 19:18:04
用ajax调用后台总结心得 先来看一个代码样例: $.ajax({ url: 'http://blog2019.applinzi.com/api/blogs', type: 'GET', contentType: "application/json", success: function (data) { var html = ''; console.log(data); for (i = 0; i < data.length; i++) { html += '<div class="panel panel-primary">' + ' <div class="panel-heading">' + data[i].blogText + '<div class="f-r">' + getMyDate(Number(data[i].date)) + '</div>' + '</div>' + ' <div class="panel-body" id = "details">' + '<a href = "./Details.html?id=' + data[i]._id + '" target = "_blank">' + data[i].introText + '</a>' + '</div>' + '<div class="panel-footer">' +

简单说说什么是跨域

我们两清 提交于 2019-11-27 11:09:44
目录 跨域警告的发生 补充: 如何允许跨域 CORS 简单请求的测试: 后端的处理 补充: 发表日期:2019年8月15日 跨域警告的发生 如果你做了一些前后端分离的项目,由于此时前端所在的服务地址与后端所在的服务地址不一样,你可能会遇到一个请求被浏览器拦截了的问题,浏览器在检测到当前页面发起的请求不属于当前域就会将其拦截,这是因为浏览器的“同源策略”。 那么,什么是同源策略呢? 同源策略用于限制页面发起不同域(源)的请求,用于提高请求的安全性。 如果两个页面的协议、端口、IP地址(域名)都相同的话,那么这两个页面就是同源,也就是同一个域。 举例: 以http://192.168.10.1:8080/index.html为对照源, http://192.168.10.1:8080/auth/login.html与它是 同源 ; http://192.168.10.1:8181/index.html与它 不是同源 ,因为端口不一样; http://192.168.10.30:8080/index.html与它 不是同源 ,因为IP地址不一样。 有些人会问,既然域不一样就会拦截,为什么我用了xxxCDN的css文件,这个请求没有被拦截呢? 这里要提一些并不是所有的跨域请求都会被拦截的。 1.通常浏览器不会拦截一些 跨域资源嵌入 的请求。 这种所谓的资源嵌入,就是类似于 <img>

从头开始制作OJ-在线IDE的搭建

浪尽此生 提交于 2019-11-27 09:49:52
大家好,我是Fred913。 之前,我看过各种OJ(OpenJudge) 但是,还是没有自己做的好。 所以,我就来写了这篇教程。 环境 这次,我打算使用这些: PHP 5.6 Nginx/Apache Python Python可以使用命令 For Ubuntu/Debian: apt install python3 -y For CentOS: yum install python3 -y 安装Python 那么,环境安装就结束了 代码部分 刚刚,我们准备好了环境,现在就是代码部分。 因为OJ需要在线运行代码的能力,所以我们在站点根目录下新建一个文件夹:api 在api文件夹里新建一个文件:python.php 代码如下: <?php //Powered By ShengFAN //使用世界上最好的语言PHP进行开发-_- $randint = rand();//为用户的代码取一个随机数作为唯一码 $f = fopen("/tmp/usrcode".$randint.".py", "w"); fwrite($f,$_GET['code']); fclose($f); echo str_replace("\n","<br>",passthru("python3 /tmp/usrcode".$randint.".py 2>&1")); //把换行转为html格式 unlink("

Ajax学习(1)---Ajax 入门简介

笑着哭i 提交于 2019-11-27 05:15:04
学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术: • HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 • JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。 • DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 • 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。 从上面可以看出,Ajax不是什么新的技术,而是几个老的技术通过新的方法结合起来,从而实现了新的效果!很多事物都是多元化的,可以说Ajax是一个新技术,也可以说Ajax是一个新的思路,一个新的架构! Ajax的基本工作原理及流程: 在一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 Java,也可能是 CGI 进程或者类似的东西),脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页面

Get请求

我的未来我决定 提交于 2019-11-26 22:02:35
写在前面的话 XMLHttpRequest对象的open方法的第一个参数为request-type,取值可以为get或post.本篇介绍get请求. get请求的目的,主要是为了获取数据.虽然get请求可以传递数据,但传递数据的目的是为了告诉服务器,给我们什么内容. 使用get请求时,参数都是随url进行传递的. 使用get请求时,容易被缓存,需注意缓存问题. 使用get请求时,服务器端请使用Request.QueryString[data]来获取数据. 发现的问题 我们在 《完整的Ajax实例》 一文中使用的就是get请求,当时遇到以下问题: 如何创建在大部分浏览器中都能运行的XMLHttpRequest对象. 使用get请求时存在缓存问题 中文乱码问题 其中,第一个问题,在《XMLHttpRequest对象》一文中已经解决; 对于第二个问题,产生的原因是: get请求会每次访问缓存,看其中是否有匹配的url,如果有,则返回缓存中的url,如果没有,则向服务器发出请求. 解决方案: 1.在url上加个动态的变化参数,以求每次访问的是不同的url,这样每次都会向服务器发出新的请求. 对于第三个问题,我们首先来看下产生乱码的原因: xmlHttp返回的数据默认是uft-8,如果客户端页面是gb2312或其他编码,就会产生乱码 解决方案: 1.若客户端是gb2312,则在输出时

ajax 随笔 - 1 文章 - 141 评论 - 143 JavaScript 的简单学习2

淺唱寂寞╮ 提交于 2019-11-26 18:56:45
https://www.cnblogs.com/yuanchenqi/articles/5997456.html AJAX 一 AJAX预备知识:json进阶 1.1 什么是 JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON 是用字符串来表示 Javascript 对象; 请大家记住一句话:json字符串就是js对象的一种表现形式(字符串的形式) 既然我们已经学过python的json模块,我们就用它来测试下json字符串和json对象到底是什么 import json i=10 s='hello' t=(1,4,6) l=[3,5,7] d={'name':"yuan"} json_str1=json.dumps(i) json_str2=json.dumps(s) json_str3=json.dumps(t) json_str4=json.dumps(l) json_str5=json.dumps(d) print(json_str1) #'10' print(json_str2) #'"hello"' print(json_str3) #'[1, 4, 6]' print(json_str4) #'[3, 5, 7]' print(json_str5) #'{"name": "yuan"}' View

JavaScript之原生ajax && jQuery之ajax

ⅰ亾dé卋堺 提交于 2019-11-26 18:17:11
ajax提供了异步访问服务器的方法,使页面无须刷新就可以更改页面内容,在实际情况中使用原生的情况较少但是原理需要掌握,一般都是使用jquey 更轻量级的实现ajax但是 原理是共同的。 原生ajax使用过程: 1.创建ajax核心对象 IE浏览器核心对象为XMLHTTP,其他浏览器核心对象为XMLHTTPRequest,因此为了解决不同浏览器的兼容问题需要对浏览器核心对象进行判断 var xmlhttp; if(window.XMLHTTP){ xmlhttp=new XMLHTTPRequest(); }else{ xmlhttp=new ActiveXObject( " Microsoft.XMLHTTP "); //ie6以下版本 } 2.创建请求 open()中有三个参数,第一个参数是请求方式,有两种get和post,两者区别在于get更快更便捷,在以下几种情况必须用post方式 (1)向服务器发送大量数据的时候; (2)发送包含未知字符输入的时候,比如表单中的提交信息是由用户所撰写的 (3)无法使用缓存文件的时候 第二个参数是后端文件的地址,第三个参数是否异步,只有为true时才可异步,开启信息传送 xmlhttp.open("get","example.php",true); 3.发送请求参数 不同的页面需求不同,需要获取不同的数据需要依靠请求参数实现

2014-05-08 总结

孤街醉人 提交于 2019-11-26 17:18:44
1、传递值,提交数据最好用 GET 提交。 xmlHttp.open("GET","check2.php?userName="+userName,true); 2、xmlHttp.open()其实也就是链接到一个后台程序,把值传递过去。 但open()方法就仅仅只是打开了连接,并没有传递,所以需要send方法 成功传递值则需要三个步骤: 第一步: xmlHttp.open("GET","check2.php?userName="+userName,true); 第二步: xmlHttp.send(null); 第三步: 这一步是一个回调函数,回调函数其实就和打电话代办事情是一个意思 这个回调函数其实就是状态改变的时候,js应该做什么事情 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var txt = xmlHttp.responseText; var tishi = document.getElementById("tishi"); if(txt == "1"){ tishi.innerHTML = "用户已经被注册,请选用其他用户名"; tishi.style.cssText = "font-size:16px;color:red