<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图灵</title>

	<style>

		* {

			margin: 0;

			padding: 0;

			list-style: none;

		}

		#wrap {

			width: 500px;

			margin: 100px auto 0;

		}

		#wrap input {

			width: 486px;

			height: 40px;

			padding-left: 10px;

		}

		#list {

			margin-top: 10px;

		}

		#list li {

			width: 460px;

			/*height: 40px;*/

			line-height: 40px;

			padding: 0 20px;

		}

		#list li.left {

			text-align: left;

			background: #ccc;

		}

		#list li.right {

			text-align: right;

			background: #777;

		}

	</style>

</head>

<body>

	<div id="wrap">

		<input id="ipt" type="text" placeholder="请输入你想说的话">

		<ul id="list">

			<!-- <li class="left">ME:hahahahaha</li>

			<li class="right">你是傻逼:PC</li> -->

		</ul>

	</div>

	<script>

		var ipt = document.getElementById('ipt');

		var list = document.getElementById('list');

		document.onkeyup = function (e) {

			var e = e || window.event;

			if (e.keyCode == 13) {

				if (ipt.value == '') {

					alert("请输入内容");

				} else {

					sendMsg();

					ipt.value = "";

				}

			}

		}

		function sendMsg() {

			var myMsg = document.createElement('li');

			myMsg.className = 'left';

			myMsg.innerHTML = "ME:" + ipt.value;

			list.appendChild(myMsg);

			var xhr = null;

			if (window.XMLHttpRequest) {

				xhr = new XMLHttpRequest();

			} else {

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

			}

			var url = 'http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info='+ipt.value+'&userid=1234567';

			xhr.open('get',url,true);

			xhr.send(null);

			xhr.onreadystatechange = function () {

				if (xhr.readyState == 4) {

					if (xhr.status == 200) {

						var data = JSON.parse(xhr.responseText).text;

						var pc = document.createElement('li');

						pc.className = 'right';

						pc.innerHTML = data + "：PC";

						list.appendChild(pc);

					} else {

						alert(xhr.status);

					}

				}

			}

		}

	</script>

</body>

</html>

　　

AJAX请求小项目的更多相关文章

  1. Ajax请求，跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  2. Ajax请求的几个小练习

    Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...

  3. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  4. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  5. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  6. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  7. springboot maven项目运行常见报错 及ajax请求报错

    如图所示 tomcat运行后直接停止,也不报错 原因:我的原因是controller路径配置重名或者service没有配置@Service 遇见这错找了好久问题,网上也搜不到,特此记录一下 问题2 a ...

  8. python学习(26)分析ajax请求抓取今日头条cosplay小姐姐图片

    分析ajax请求格式,模拟发送http请求,从而获取网页代码,进而分析取出需要的数据和图片.这里分析ajax请求,获取cosplay美女图片. 登陆今日头条,点击搜索,输入cosplay 下面查看浏览 ...

  9. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

随机推荐

  1. PL/SQL Developer使用技巧以及快捷键设置

    1.类SQL PLUS窗口: File->New->Command Window,这个类似于oracle的客户端工具sql plus,但是比在cmd中的sqlplus好用多了. 2.设置关 ...

  2. 实现ThreadFactory接口生成自定义的线程给Fork/Join框架

    Fork/Join框架是Java7中最有趣的特征之一.它是Executor和ExecutorService接口的一个实现,允许你执行Callable和Runnable任务而不用管理这些执行线程.这个执 ...

  3. javaWeb基础核心之一Servlet

    既然是做JAVA开发的,先从一些基本的整理起来,算是知识回顾,加深记忆. 第一篇想到那理到哪,可能有点乱,不是太会排版,见谅,估计可能也就我自己看的懂. servlet在百度百科上的定义是这样的: S ...

  4. Natas Wargame Level 19 Writeup（猜测令牌，会话劫持）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq4AAAEKCAYAAADTmtdjAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  5. 详解CockroachDB事务处理系统

    本文提到的一些术语,比如Serializability和Linearizability,解释看Linearizability, Serializability and Strict Serializa ...

  6. jQuery中易混淆知识点总结（持续更新）

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  7. sh脚本异常,binsh^M bad interpreter No such file or directory

    错误 在Linux中执行.sh脚本,出现如下异常 /bin/sh^M: bad interpreter: No such file or directory 原因 在windows系统中编辑的.sh文 ...

  8. iOS 开发之 protocol Buffer 数据交换

    前言: 从 14 年公司做项目时开始接触 Google 的 protocol Buffer,用了一段时间,后来到新公司就没有机会再使用了,趁着还没完全忘记,记录下. 简介:protocolbuffer ...

  9. 简单VR照片 使用陀螺仪、姿态角（Roll、Pitch、Yaw ）、四元数

        最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度.但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR.VR的朋友一些提示吧.   ...

  10. 【小练习05】HTML+CSS--淘宝商铺小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...